当有人点击图片时，我们正在使用 jQuery厚框动态显示 iframe。在这个 iframe 中，我们使用Galleria一个 javascript 库来显示多张图片。
问题似乎是$(document).ready在 iframe 中似乎被触发得太快了，甚至还没有加载 iframe 内容，因此 Galleria 代码没有正确应用于 DOM 元素。 $(document).ready似乎使用 iframe 父就绪状态来决定 iframe 是否就绪。
如果我们将 document ready 调用的函数提取到一个单独的函数中，并在 100 毫秒超时后调用它。它可以工作，但我们不能在生产速度慢的计算机上冒险。
$(document).ready(function() { setTimeout(ApplyGalleria, 100); });
我的问题：我们应该绑定哪个 jQuery 事件才能在动态 iframe 准备好时执行我们的代码，而不仅仅是它的父级？
我回答了一个类似的问题（请参阅IFRAME 完成加载时的 Javascript 回调？）。您可以使用以下代码控制 iframe 加载事件：
function callIframe(url, callback) {
$(document.body).append('<IFRAME id="myId" ...>');
$('iframe#myId').attr('src', url);
$('iframe#myId').load(function() {
callback(this);
});
}
在处理 iframe 时，我发现使用加载事件而不是文档就绪事件已经足够好了。
使用 jQuery 1.3.2 以下为我工作：
$('iframe').ready(function() {
$('body', $('iframe').contents()).html('Hello World!');
});
修订：！实际上，上面的代码有时看起来可以在 Firefox 中运行，而在 Opera 中似乎从来没有。
相反，我为我的目的实施了一个轮询解决方案。简化后看起来像这样：
$(function() {
function manipIframe() {
el = $('body', $('iframe').contents());
if (el.length != 1) {
setTimeout(manipIframe, 100);
return;
}
el.html('Hello World!');
}
manipIframe();
});
这不需要调用 iframe 页面中的代码。所有代码都驻留在父框架/窗口中并从其执行。
在 IFrames 中，我通常通过在块的最后放置一个小脚本来解决这个问题：
<body>
The content of your IFrame
<script type="text/javascript">
//<![CDATA[
fireOnReadyEvent();
parent.IFrameLoaded();
//]]>
</script>
</body>
这对我来说大部分时间都在工作。有时最简单和最天真的解决方案是最合适的。
按照 DrJokepu 和 David Murdoch 的想法，我实现了一个更完整的版本。它要求父级和 iframe 上的 jQuery 以及 iframe 都在您的控制之下。
iframe 代码：
var iframe = window.frameElement;
if (iframe){
iframe.contentDocument = document;//normalization: some browsers don't set the contentDocument, only the contentWindow
var parent = window.parent;
$(parent.document).ready(function(){//wait for parent to make sure it has jQuery ready
var parent$ = parent.jQuery;
parent$(iframe).trigger("iframeloading");
$(function(){
parent$(iframe).trigger("iframeready");
});
$(window).load(function(){//kind of unnecessary, but here for completion
parent$(iframe).trigger("iframeloaded");
});
$(window).unload(function(e){//not possible to prevent default
parent$(iframe).trigger("iframeunloaded");
});
$(window).on("beforeunload",function(){
parent$(iframe).trigger("iframebeforeunload");
});
});
}
父测试代码：
$(function(){
$("iframe").on("iframeloading iframeready iframeloaded iframebeforeunload iframeunloaded", function(e){
console.log(e.type);
});
});
找到了问题的解决方案。
当您单击打开 iframe 的厚框链接时，它会插入一个 id 为 TB_iframeContent 的 iframe。
无需依赖$(document).readyiframe 代码中的事件，我只需绑定到父文档中 iframe 的加载事件：
$('#TB_iframeContent', top.document).load(ApplyGalleria);
此代码位于 iframe 中，但绑定到父文档中控件的事件。它适用于 FireFox 和 IE。
基本上其他人已经发布了，但恕我直言，更干净一点：
$('<iframe/>', {
src: 'https://example.com/',
load: function() {
alert("loaded")
}
}).appendTo('body');
此答案中的此功能是处理此问题的最佳方法，$.ready因为 iframe 显式失败。这是不支持这一点的决定。
load如果 iframe 已经加载，该事件也不会触发。非常令人沮丧的是，这在 2020 年仍然是一个问题！
function onIframeReady($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) {
errorFn();
}
}
试试这个，
<iframe id="testframe" src="about:blank" onload="if (testframe.location.href != 'about:blank') testframe_loaded()"></iframe>
然后，您需要做的就是创建 JavaScript 函数 testframe_loaded()。
我正在将带有 jQuery ajax 的 PDF 加载到浏览器缓存中。然后我使用浏览器缓存中的数据创建嵌入式元素。我想它也适用于 iframe。
var url = "http://example.com/my.pdf";
// show spinner
$.mobile.showPageLoadingMsg('b', note, false);
$.ajax({
url: url,
cache: true,
mimeType: 'application/pdf',
success: function () {
// display cached data
$(scroller).append('<embed type="application/pdf" src="' + url + '" />');
// hide spinner
$.mobile.hidePageLoadingMsg();
}
});
您还必须正确设置 http 标头。
HttpContext.Response.Expires = 1;
HttpContext.Response.Cache.SetNoServerCaching();
HttpContext.Response.Cache.SetAllowResponseInBrowserHistory(false);
HttpContext.Response.CacheControl = "Private";
这是我与客户遇到的确切问题。我创建了一个似乎适用于 iframe 准备工作的小 jquery 插件。它使用轮询来检查 iframe 文档 readyState 以及内部文档 url 以及 iframe 源，以确保 iframe 实际上是“准备好”的。
“onload”的问题是您需要访问被添加到 DOM 的实际 iframe，如果您不这样做，那么您需要尝试捕获 iframe 加载，如果它被缓存，那么您可能不会。我需要的是一个可以随时调用的脚本，并确定 iframe 是否“准备好”。
这是问题：
这是我最终想出的jsfiddle。
https://jsfiddle.net/q0smjkh5/10/
在上面的 jsfiddle 中，我正在等待 onload 将 iframe 附加到 dom，然后检查 iframe 的内部文档的就绪状态——这应该是跨域的，因为它指向维基百科——但 Chrome 似乎报告“完成”。然后，当 iframe 实际上准备就绪时，将调用插件的 iready 方法。回调尝试再次检查内部文档的就绪状态 - 这次报告跨域请求（这是正确的） - 无论如何它似乎可以满足我的需要并希望它可以帮助其他人。
<script>
(function($, document, undefined) {
$.fn["iready"] = function(callback) {
var ifr = this.filter("iframe"),
arg = arguments,
src = this,
clc = null, // collection
lng = 50, // length of time to wait between intervals
ivl = -1, // interval id
chk = function(ifr) {
try {
var cnt = ifr.contents(),
doc = cnt[0],
src = ifr.attr("src"),
url = doc.URL;
switch (doc.readyState) {
case "complete":
if (!src || src === "about:blank") {
// we don't care about empty iframes
ifr.data("ready", "true");
} else if (!url || url === "about:blank") {
// empty document still needs loaded
ifr.data("ready", undefined);
} else {
// not an empty iframe and not an empty src
// should be loaded
ifr.data("ready", true);
}
break;
case "interactive":
ifr.data("ready", "true");
break;
case "loading":
default:
// still loading
break;
}
} catch (ignore) {
// as far as we're concerned the iframe is ready
// since we won't be able to access it cross domain
ifr.data("ready", "true");
}
return ifr.data("ready") === "true";
};
if (ifr.length) {
ifr.each(function() {
if (!$(this).data("ready")) {
// add to collection
clc = (clc) ? clc.add($(this)) : $(this);
}
});
if (clc) {
ivl = setInterval(function() {
var rd = true;
clc.each(function() {
if (!$(this).data("ready")) {
if (!chk($(this))) {
rd = false;
}
}
});
if (rd) {
clearInterval(ivl);
clc = null;
callback.apply(src, arg);
}
}, lng);
} else {
clc = null;
callback.apply(src, arg);
}
} else {
clc = null;
callback.apply(this, arguments);
}
return this;
};
}(jQuery, document));
</script>