new*_*e29 69 javascript iframe jquery
我有一个id ="myIframe"的iframe,这里我的代码加载它的内容:
$('#myIframe').attr("src", "my_url");
问题是有时加载时间太长,有时加载速度很快.所以我必须使用"setTimeout"函数:
setTimeout(function(){
if (//something shows iframe is loaded or has content)
{
//my code
}
else
{
$('#myIframe').attr("src",""); //stop loading content
}
},5000);
我想知道的是如何确定iFrame是否已加载或是否具有内容.使用iframe.contents().find()不起作用.我不能用iframe.load(function(){}).
Bir*_*chi 73
试试这个.
<script>
function checkIframeLoaded() {
// Get a handle to the iframe element
var iframe = document.getElementById('i_frame');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
// Check if loading is complete
if ( iframeDoc.readyState == 'complete' ) {
//iframe.contentWindow.alert("Hello");
iframe.contentWindow.onload = function(){
alert("I am loaded");
};
// The loading is complete, call the function we want executed once the iframe is loaded
afterLoading();
return;
}
// If we are here, it is not loaded. Set things up so we check the status again in 100 milliseconds
window.setTimeout(checkIframeLoaded, 100);
}
function afterLoading(){
alert("I am here");
}
</script>
<body onload="checkIframeLoaded();">
pra*_*abu 42
善意使用:
$('#myIframe').on('load', function(){
//your code (will be called once iframe is done loading)
});
随着标准的变化,更新了我的答案.
Ora*_*ane 14
最简单的选择:
<script type="text/javascript">
function frameload(){
alert("iframe loaded")
}
</script>
<iframe onload="frameload()" src=...>
Tus*_*kla 10
我有同样的问题并添加到此,我需要检查是否加载iframe而不管跨域策略.我正在开发一个chrome扩展,它在网页上注入某些脚本,并在iframe的父页面中显示一些内容.我尝试了以下方法,这对我来说非常适合.
PS:在我的情况下,我确实可以控制iframe中的内容,但不能控制父网站上的内容.(iframe托管在我自己的服务器上)
首先:
创建一个iframe,其中包含一个data-属性(在我的例子中,这部分是在注入的脚本中)
<iframe id="myiframe" src="http://anyurl.com" data-isloaded="0"></iframe>
现在在iframe代码中,使用:
var sourceURL = document.referrer;
window.parent.postMessage('1',sourceURL);
现在回到我的案例中注入的脚本:
setTimeout(function(){
var myIframe = document.getElementById('myiframe');
var isLoaded = myIframe.prop('data-isloaded');
if(isLoaded != '1')
{
console.log('iframe failed to load');
} else {
console.log('iframe loaded');
}
},3000);
和,
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
if(event.origin !== 'https://someWebsite.com') //check origin of message for security reasons
{
console.log('URL issues');
return;
}
else {
var myMsg = event.data;
if(myMsg == '1'){
//8-12-18 changed from 'data-isload' to 'data-isloaded
$("#myiframe").prop('data-isloaded', '1');
}
}
}
它可能不完全回答问题,但它确实是这个问题的一个可能的例子,我通过这种方法解决了.
我不确定你是否可以检测它是否已加载,但是你可以在加载后触发事件:
$(function(){
$('#myIframe').ready(function(){
//your code (will be called once iframe is done loading)
});
});
编辑:正如杰西哈利特所指出的那样iframe,即使它已经加载,也会在加载时触发.基本上,如果iframe已加载,则回调将立即执行.
您可以使用iframe的load事件在iframe加载时进行响应。
document.querySelector('iframe').onload = function(){
console.log('iframe loaded');
};
这不会告诉您是否加载了正确的内容：要进行检查，可以检查contentDocument。
document.querySelector('iframe').onload = function(){
var iframeBody = this.contentDocument.body;
console.log('iframe loaded, body is: ', body);
};
contentDocument如果iframesrc指向与代码运行所在的域不同的域，则无法进行检查。
就我而言，它是一个跨域框架，有时无法加载。对我有用的解决方案是：如果它成功加载，那么如果您尝试以下代码：
var iframe = document.getElementsByTagName('iframe')[0];
console.log(iframe.contentDocument);
它不允许您访问contentDocument并抛出跨域错误，但是如果框架未成功加载，contentDocument则将返回一个#document对象