iframe 上的 onload 事件在 ie 和 firefox/google chrome 中的工作方式不同
Posted
技术标签:
【中文标题】iframe 上的 onload 事件在 ie 和 firefox/google chrome 中的工作方式不同【英文标题】:onload event on iframe working differently in ie and firefox/googlechrome 【发布时间】:2013-10-29 20:16:45 【问题描述】:这是我的 iframe 的 aspx 页面
<asp:UpdatePanel ID="dynamicForm" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<iframe id="iTargetLoader" name="iTargetLoader" onload="onLoadFn()"></iframe>
</ContentTemplate>
</asp:UpdatePanel>
这是我在 javascript 中的 onloadfn 函数,用于 iframe 的 onload 事件
function onLoadFn()
//debugger;
document.getElementById("iTargetLoader").contentWindow.document.defaultView.frameElement.innerText;
var frame = document.getElementById("iTargetLoader");
var contentDoc = (frame.contentWindow || frame.contentDocument);
if (contentDoc != null && contentDoc.document.body != null)
var serverResult = contentDoc.document.body.innerText;
var regSuccess = /success/i;
if (regSuccess.test(serverResult))
if (parseInt($('#ContentPlaceHolder1_hdn_qstnadd').val()) == 1)
addQuestion();
$('#ContentPlaceHolder1_hdn_qstnadd').val(0);
//alert('success!');
//return "success!";
else
if ($.trim(serverResult) == "")
//alert("empty!");
else
alert("failed!" + serverResult + "Please Contact Your Administrator!");
window.parent.window.open("", "_self");
window.parent.window.close();
//return "failure!";
else
return "";
这里来自 servlet 的反馈被加载到 iframe,即“iTargetLoader”,我试图在加载成功后检查 iframe 的内容。它在 IE 中工作正常,但是当我使用 firefox 时或 google chrome 在 onload 事件中 iframe 的加载未完成,因此内部 html 显示为空。但在 IE 中,加载首先完成,innerhtml 显示反馈。我该如何解决?
【问题讨论】:
【参考方案1】:所以你的问题更多是让它跨浏览器兼容: 那就让我们把怪癖弄清楚吧......
HTML 或 ASPX
使用引用this
,这样您就不需要多次获取该对象。
<iframe id="iTargetLoader" name="iTargetLoader" onload="javascript: onLoadFn(this);"></iframe>
JS
// a global function needs to be defined first before it can be used
// most likely not an issue in this example but
// similar to addQuestion you might want to change it to IIFE
// http://en.wikipedia.org/wiki/Immediately-invoked_function_expression
function onLoadFn(frame)
// define your variables
var contentDoc,
serverResult,
regSuccess = /success/i,
qstnadd;
// test your parameter exists, in this case the iframe (this)
if (frame)
// Note: Because of security reasons, the contents of a document can be accessed from another document only if the two documents are located in the same domain.
// Note: Internet Explorer 8 (and higher) supports the contentDocument property only if a !DOCTYPE is specified. For earlier versions of IE, use the contentWindow property.
contentDoc = frame.contentWindow || frame.contentDocument;
if (contentDoc)
// testing the proper document object here
if (contentDoc.document)
contentDoc = contentDoc.document;
serverResult = contentDoc.body.innerText || "";
if (regSuccess.test(serverResult))
// request your object once
// .Net supports something like IDMode static which can help to determine the ID here.
qstnadd = $('#ContentPlaceHolder1_hdn_qstnadd');
// use a raddix when using parseInt
if (parseInt(qstnadd.val(), 10) === 1)
addQuestion();
qstnadd.val(0);
else
// looks trivial to me
if ($.trim(serverResult) === "")
alert("empty");
else
alert("failed!" + serverResult + "Please Contact Your Administrator!");
window.parent.window.open("", "_self");
window.parent.window.close();
即使这不能直接解决您的问题,我相信您也可以通过这种方式更好地查明问题。大胆猜测,您的问题出在contentDoc.document
,因为您请求的是window.document.body
或document.body
,但不是window.document.document.body
,尽管后者可能在IE 中工作^^
【讨论】:
感谢您的解释,但问题是 contentDoc.document 是空的,即 servlet 反馈未加载到 iframe 中,即 contentDoc 目前在浏览器中,除了 IE。 所以你是说frame.contentWindow
和frame.contentDocument
都是空的?如果是这种情况,则此代码之外还有另一个问题。
是的,加载事件有问题。 IE 和 google chrome 对 load 事件的行为似乎不同。正如我之前所说,IE 在文档准备好之前加载 iframe,但谷歌浏览器最后加载 iframe。如何让谷歌浏览器在加载事件中表现得像 IE?以上是关于iframe 上的 onload 事件在 ie 和 firefox/google chrome 中的工作方式不同的主要内容,如果未能解决你的问题,请参考以下文章
angularjs $compile 对 iframe 上的 onload 事件进行错误处理
谷歌浏览器window.onload事件不响应,Safari,Firefox都可以。