我的脚本在用户单击按钮时加载iframe。我想在iframe加载后调用另一个函数,但它不起作用。 iframe确实正常加载,但iframe完成加载后永远不会调用.load()事件。 iframe包含来自同一网站的内容(无外部内容)。奇怪的是,我在我的代码中的其他几个点使用了下面描述的相同技术,它运行得很好。谁能建议我接下来应该检查什么?
这是相关的代码:
$('#myIframe').load(function () {
alert('iframe loaded');
});
$('#someButton').live('click', function () {
$('body').append($('<iframe id="myIframe" src="https://www.mywebsite.com" width="100%"></iframe>'));
});
看起来有点类似于这里的问题:
jQuery .ready在动态插入的iframe中
这样,Iframe元素存在于附加的Dom中。只有当您设置了Url才会加载,此时您已经附加了要在末尾标记的加载函数。
所以对你的代码
$('#someButton').live('click', function () {
$('body').append($('<iframe id="myIframe" width="100%"></iframe>'));
$('#myIframe').attr('src',"https://www.mywebsite.com");
$('#myIframe').load(function () {
alert('iframe loaded');
});
});
看起来有点类似于这里的问题:
jQuery .ready在动态插入的iframe中
这样,Iframe元素存在于附加的Dom中。只有当您设置了Url才会加载,此时您已经附加了要在末尾标记的加载函数。
所以对你的代码
$('#someButton').live('click', function () {
$('body').append($('<iframe id="myIframe" width="100%"></iframe>'));
$('#myIframe').attr('src',"https://www.mywebsite.com");
$('#myIframe').load(function () {
alert('iframe loaded');
});
});
您的代码示例不起作用的原因是因为您绑定到一个不存在的元素,然后在没有附加事件处理程序的情况下将该元素放入DOM中 load
事件。尝试这个:
$('#someButton').live('click', function () {
var $iframe = $('<iframe id="myIframe" src="" width="100%"></iframe>').load(function () {
alert('iframe loaded');
}).attr('src', 'https://www.mywebsite.com');
$('body').append($iframe);
});
或者更接近您的原始代码,您可以替换 .load()
同 .live('load')
:
$('#myIframe').live('load', function () {
alert('iframe loaded');
});
$('#someButton').live('click', function () {
$('body').append('<iframe id="myIframe" src="https://www.mywebsite.com" width="100%"></iframe>');//notice I removed the $() around the append code as it is unnecessary
});
尝试这个:
$("<iframe id='myId'></iframe>").appendTo("body")
.attr('src', url)
.load(function()
{
callback(this);
});
刚添加了一些链接,创建了选择器通常所在的元素(这是可能的),并将其附加到正文。
如果您在iframe中加载的文档是您控制的内容,请尝试将加载处理程序放入该文档中。如果您需要父文档在iframe加载后执行某些操作,则可以从子项中调用父项中的函数:
// in parent doc
function myIframeLoaded() {
// do something
}
// in iframe doc
$(document).load(function() { // or .ready()
parent.myIframeLoaded();
}