如何检测 iframe 何时已加载
[英]How to detect when an iframe has already been loaded
问题描述
如果在 iframe 完成加载后附加$('#someIframe').load(function(){...})似乎不会触发。 那是对的吗？
我真正想要的是拥有一个 function，它总是在加载 iframe 时或之后调用一次。 为了更清楚地说明这一点，这里有两种情况：
- Iframe 尚未加载：加载后运行回调 function。
- Iframe 已加载：立即运行回调。
我怎样才能做到这一点？
7 个解决方案
解决方案1
47 已采纳 2016-03-22 13:23:13
我一直用头撞墙，直到我发现这里发生了什么。
背景资料
- 如果 iframe 已经加载，则无法使用
.load()（事件永远不会触发） - 不支持在 iframe 元素上使用
.ready()（参考），即使 iframe 尚未加载，它也会立即调用回调 - 使用
postMessage或在 iframe 内load调用容器函数只有在控制它时才有可能 - 在容器上使用
$(window).load()也会等待其他资产加载，如图像和其他 iframe。 如果您只想等待特定的 iframe，这不是解决方案 - 在 Chrome 中检查
readyState是否已触发 onload 事件是没有意义的，因为 Chrome 使用“about:blank”空页面初始化每个 iframe。 此页面的readyState可能是complete，但它不是您期望的页面的readyState（src属性）。
解决方案
以下是必要的：
- 如果 iframe 尚未加载，我们可以观察
.load()事件 - 如果 iframe 已经加载，我们需要检查
readyState - 如果
readyState是complete，我们通常可以假设 iframe 已经加载。 但是，由于 Chrome 的上述行为，我们还需要检查它是否为空页面的readyState - 如果是这样，我们需要间隔一段时间观察
readyState，以检查实际文档（与src属性相关）是否complete
我已经用以下函数解决了这个问题。 它已（转换为 ES5）在
- 铬 49
- 野生动物园 5
- 火狐 45
- IE 8、9、10、11
- 边缘 24
- iOS 8.0（“Safari 移动版”）
- Android 4.0（“浏览器”）
取自jquery.mark 的函数
/**
* Will wait for an iframe to be ready
* for DOM manipulation. Just listening for
* the load event will only work if the iframe
* is not already loaded. If so, it is necessary
* to observe the readyState. The issue here is
* that Chrome will initialize iframes with
* "about:blank" and set its readyState to complete.
* So it is furthermore necessary to check if it's
* the readyState of the target document property.
* Errors that may occur when trying to access the iframe
* (Same-Origin-Policy) will be catched and the error
* function will be called.
* @param {jquery} $i - The jQuery iframe element
* @param {function} successFn - The callback on success. Will
* receive the jQuery contents of the iframe as a parameter
* @param {function} errorFn - The callback on error
*/
var onIframeReady = function($i, successFn, errorFn) {
try {
const iCon = $i.first()[0].contentWindow,
bl = "about:blank",
compl = "complete";
const callCallback = () => {
try {
const $con = $i.contents();
if($con.length === 0) { // https://git.io/vV8yU
throw new Error("iframe inaccessible");
}
successFn($con);
} catch(e) { // accessing contents failed
errorFn();
}
};
const observeOnload = () => {
$i.on("load.jqueryMark", () => {
try {
const src = $i.attr("src").trim(),
href = iCon.location.href;
if(href !== bl || src === bl || src === "") {
$i.off("load.jqueryMark");
callCallback();
}
} catch(e) {
errorFn();
}
});
};
if(iCon.document.readyState === compl) {
const src = $i.attr("src").trim(),
href = iCon.location.href;
if(href === bl && src !== bl && src !== "") {
observeOnload();
} else {
callCallback();
}
} else {
observeOnload();
}
} catch(e) { // accessing contentWindow failed
errorFn();
}
};
工作示例
由两个文件（index.html 和 iframe.html）组成： index.html ：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Parent</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script>
$(function() {
/**
* Will wait for an iframe to be ready
* for DOM manipulation. Just listening for
* the load event will only work if the iframe
* is not already loaded. If so, it is necessary
* to observe the readyState. The issue here is
* that Chrome will initialize iframes with
* "about:blank" and set its readyState to complete.
* So it is furthermore necessary to check if it's
* the readyState of the target document property.
* Errors that may occur when trying to access the iframe
* (Same-Origin-Policy) will be catched and the error
* function will be called.
* @param {jquery} $i - The jQuery iframe element
* @param {function} successFn - The callback on success. Will
* receive the jQuery contents of the iframe as a parameter
* @param {function} errorFn - The callback on error
*/
var onIframeReady = function($i, successFn, errorFn) {
try {
const iCon = $i.first()[0].contentWindow,
bl = "about:blank",
compl = "complete";
const callCallback = () => {
try {
const $con = $i.contents();
if($con.length === 0) { // https://git.io/vV8yU
throw new Error("iframe inaccessible");
}
successFn($con);
} catch(e) { // accessing contents failed
errorFn();
}
};
const observeOnload = () => {
$i.on("load.jqueryMark", () => {
try {
const src = $i.attr("src").trim(),
href = iCon.location.href;
if(href !== bl || src === bl || src === "") {
$i.off("load.jqueryMark");
callCallback();
}
} catch(e) {
errorFn();
}
});
};
if(iCon.document.readyState === compl) {
const src = $i.attr("src").trim(),
href = iCon.location.href;
if(href === bl && src !== bl && src !== "") {
observeOnload();
} else {
callCallback();
}
} else {
observeOnload();
}
} catch(e) { // accessing contentWindow failed
errorFn();
}
};
var $iframe = $("iframe");
onIframeReady($iframe, function($contents) {
console.log("Ready to got");
console.log($contents.find("*"));
}, function() {
console.log("Can not access iframe");
});
});
</script>
<iframe src="iframe.html"></iframe>
</body>
</html>
iframe.html :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Child</title>
</head>
<body>
<p>Lorem ipsum</p>
</body>
</html>
您还可以将index.html的src属性更改为例如“ http://example.com/ ”。 只是玩弄它。
解决方案2
3 2013-06-18 07:29:52
我会使用postMessage 。 iframe 可以分配自己的 onload 事件并发布到父级。 如果存在计时问题，请确保在创建 iframe 之前分配父级的 postMessage 处理程序。
为此，iframe 必须知道父级的 url，例如通过将 GET 参数传递给 iframe。
解决方案3
1 2019-01-28 09:46:11
我有同样的问题。 就我而言，我只是检查了onload函数是否被触发。
var iframe = document.getElementById("someIframe");
var loadingStatus = true;
iframe.onload = function () {
loadingStatus = false;
//do whatever you want [in my case I wants to trigger postMessage]
};
if (loadingStatus)
//do whatever you want [in my case I wants to trigger postMessage]
解决方案4
0 2013-06-27 18:54:20
我非常努力地想找到一个在跨浏览器中始终有效的解决方案。 重要提示：我无法找到这样的解决方案。 但据我所知：
// runs a function after an iframe node's content has loaded
// note, this almost certainly won't work for frames loaded from a different domain
// secondary note - this doesn't seem to work for chrome : (
// another note - doesn't seem to work for nodes created dynamically for some reason
function onReady(iframeNode, f) {
var windowDocument = iframeNode[0].contentWindow.document;
var iframeDocument = windowDocument?windowDocument : iframeNode[0].contentWindow.document;
if(iframeDocument.readyState === 'complete') {
f();
} else {
iframeNode.load(function() {
var i = setInterval(function() {
if(iframeDocument.readyState === 'complete') {
f();
clearInterval(i);
}
}, 10);
});
}
}
我是这样使用它的：
onReady($("#theIframe"), function() {
try {
var context = modal[0].contentWindow;
var i = setInterval(function() {
if(context.Utils !== undefined && context.$) { // this mess is to attempt to get it to work in firefox
context.$(function() {
var modalHeight = context.someInnerJavascript();
clearInterval(i);
});
}
}, 10);
} catch(e) { // ignore
console.log(e);
}
});
请注意，即使这样也不能解决我的问题。 以下是此解决方案的一些问题：
- 在 onReady 中，对于动态添加的 iframe， iframeDocument.readyState 似乎卡在“未初始化”状态，因此回调永远不会触发
- 由于某种原因，整个设置似乎仍然无法在 Firefox 中工作。 似乎 setInterval 函数是从外部清除的。
- 请注意，其中一些问题仅在页面上加载了大量其他内容时才会发生，这使得这些事情的时间确定性较低。
因此，如果有人可以对此进行改进，将不胜感激。
解决方案5
0 2021-10-24 07:58:24
如果 iFrame 已经加载，此函数将立即运行您的回调函数，或者在运行回调函数之前等待 iFrame 完全加载。 只需将要在 iFrame 加载完成时运行的回调函数和元素传递给此函数：
function iframeReady(callback, iframeElement) {
const iframeWindow = iframeElement.contentWindow;
if ((iframeElement.src == "about:blank" || (iframeElement.src != "about:blank" && iframeWindow.location.href != "about:blank")) && iframeWindow.document.readyState == "complete") {
callback();
} else {
iframeWindow.addEventListener("load", callback);
}
}
这将解决最常见的问题，例如 chrome 使用 about:blank 初始化 iframe 和 iFrame 不支持 DOMContentLoaded 事件。 请参阅此https://stackoverflow.com/a/69694808/15757382答案以获取解释。
解决方案6
0 2022-02-02 15:19:45
这是我在没有 jQuery 依赖的 Typescript 中的解决方案
export function whenIframeLoaded(iframe: HTMLIFrameElement): Promise<void> {
return new Promise((resolve, reject) => {
try {
const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
if (iframeDocument.readyState === 'complete') {
resolve();
} else {
iframe.addEventListener(
'load', () => resolve(),
{ once: true }
);
}
} catch {
reject();
}
});
}
解决方案7
-1 2013-06-18 07:23:52
仅当加载 iframe 内的内容时，innerDoc 为 true 并触发 if 内的代码。
window.onload = function(){
function manipulateIframe(iframeId, callback) {
var iframe = document.getElementById(iframeId).contentWindow.document;
callback(iframe);
};
manipulateIframe('IFwinEdit_forms_dr4r3_forms_1371601293572', function (iframe) {
console.log(iframe.body);
});};
例子
解决方案8
-1 2013-06-19 23:08:11
我认为您应该尝试使用onreadystatechange事件。
$(function () {
var innerDoc = ($("#if")[0].contentDocument) ? $("#if")[0].contentDocument : $("#if")[0].contentWindow.document;
console.debug(innerDoc);
$("#if").load( function () {
alert("load");
alert(innerDoc.readyState)
});
innerDoc.onreadystatechange = function () {
alert(innerDoc.readyState)
};
setTimeout(innerDoc.onreadystatechange, 5000);
});
编辑：上下文不是我认为的那样。 您可以检查 iframe 文档的 readyState ，一切都应该没问题。
OP：这是我根据上述概念制作的打包函数：
// runs a function after an iframe node's content has loaded
// note, this almost certainly won't work for frames loaded from a different domain
onReady: function(iframeNode, f) {
var windowDocument = iframeNode[0].contentWindow.document;
var iframeDocument = windowDocument?windowDocument : iframeNode[0].contentWindow.document
if(iframeDocument.readyState === 'complete') {
f();
} else {
iframeNode.load(f);
}
}
如何在不使用eval（）或requireJS的情况下检测是否已加载插件或脚本？
[英]How to detect whether a plugin or script has already been loaded without using eval() or requireJS?
确定在IFrame已加载后何时呈现iFrame内容
[英]Determine when iFrame content is rendered after IFrame has already loaded
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.