Question

我使用jQuery窗口libray https://github.com/humaan/Modaal

以这种方式触发事件a1 ~ a

---我在这里更新了我的问题，使其更加通用，并使用了iframe / HTML而不是外部svg ---

触发元素，例如在iframe中加载的外部HTML中，我将以下代码应用于iframe：

$("class of element").modaal({arg1, arg2,...});

调用此函数：

<iframe src="External.html" id="mainContent" onload="access()"></iframe>

实际上，它仅在第二次单击时有效。知道我没有适当考虑的事情吗？

最佳

Answer 1

您无需等待Windows加载，而仅需要iframe：

$(function() {
    $("#mainContent").bind("load",function(){
        var myIframeElement = $(this).contents().find(".modaal");

        myIframeElement.modaal({
            content_source: '#iframe-content',
            type: 'inline',
        });
    });
});

Answer 2

之所以不起作用，是因为jQuery试图附加该功能时，iframe并未完全加载。由于$(document).ready(function(){}不起作用，解决方法是使用

对其进行初始化

$( window ).on( "load",function() {
$("#mainContent").contents().find("IDofDIVelement").modaal({});
});

这可以正常地将功能附加到iframe中的元素上。

实际上，莫代尔将在打开和关闭覆盖层后消失envent处理程序。因此，也许有人也想触发iframe元素以获得模态，这是可以解决此问题的设置。（可以通过@SvenLiivaks回答对其进行优化）：

 $(window).on("load", function() {
     reload();
    });

function reload() {
    var length = $("#iframeID").contents().find("#IDofDIVelement").length;
    // The following check will return 1, as the iframe exists.
    if (length == 0) {
        setTimeout(function() { reload() }, 500);
    } else {
        $("#iframeID").contents().find("#IDofDIVelement").modaal({
            content_source: '#modalwrapper',
            overlay_close: true,
            after_close: function reattach() {
                reload();
            }
        });
    }
}

用JS调用用户定义的jQuery函数

2 个答案: