代码之家  ›  专栏  ›  技术社区  ›  Hirschferkel

使用JS调用用户定义的jquery函数

  •  0
  • Hirschferkel  · 技术社区  · 6 年前

    我使用jquery窗口库 https://github.com/humaan/Modaal

    以这种方式触发事件 $("class of element").modaal({arg1, arg2,...});

    ---我在这里更新了我的问题,使其更通用,并使用了iframe/html而不是外部SVG。---

    为了触发一个元素,例如在加载在iframe中的外部HTML中,我对iframe应用了以下代码:

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

    它调用这个函数:

    function access() {
    var html = document.getElementById("mainContent").contentDocument.getElementById("IDofDIVelement");
    html.addEventListener('click', function() {clicker();});
    }
    function clicker()
    {
    // console.log('hooray!');
    $("#mainContent").contents().find("IDofDIVelement").modaal({});
    //return false;
    }
    

    实际上,它只在每一秒钟点击一次。知道我没有正确考虑什么吗?

    最好的

    2 回复  |  直到 6 年前
        1
  •  1
  •   Sven Liivak    6 年前

    您不需要等待Windows加载,只需等待iframe:

    $(function() {
        $("#mainContent").bind("load",function(){
            var myIframeElement = $(this).contents().find(".modaal");
    
            myIframeElement.modaal({
                content_source: '#iframe-content',
                type: 'inline',
            });
        });
    });
    
        2
  •  0
  •   Hirschferkel    6 年前

    它不起作用的原因是iframe没有完全加载,而jquery试图附加该函数。AS $(document).ready(function(){} 不起作用,解决方法是用初始化它

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

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

    实际上,当覆盖再次打开和关闭后,modal将消失envent处理程序。 所以,也许有人想为modal触发一个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();
                }
            });
        }
    }