[英]Call user defined jQuery function with JS
我使用jQuery窗口libray 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;
}
实际上,它只会在第二次单击时起作用。 知道我没有适当考虑的事情吗?
最好
您无需等待Windows加载,而只需要iframe:
$(function() {
$("#mainContent").bind("load",function(){
var myIframeElement = $(this).contents().find(".modaal");
myIframeElement.modaal({
content_source: '#iframe-content',
type: 'inline',
});
});
});
之所以不起作用,是因为jQuery尝试附加该功能时,iframe并未完全加载。 由于$(document).ready(function(){}
不起作用,解决方法是使用
$( window ).on( "load",function() {
$("#mainContent").contents().find("IDofDIVelement").modaal({});
});
这可以正常工作,以将功能附加到iframe中的元素。
实际上,在覆盖层再次打开和关闭后,模态将消失。 因此,也许有人也想触发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();
}
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.