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.bodydocument.body,但不是window.document.document.body,尽管后者可能在IE 中工作^^

【讨论】:

感谢您的解释,但问题是 contentDoc.document 是空的,即 servlet 反馈未加载到 iframe 中,即 contentDoc 目前在浏览器中,除了 IE。 所以你是说frame.contentWindowframe.contentDocument 都是空的?如果是这种情况,则此代码之外还有另一个问题。 是的,加载事件有问题。 IE 和 google chrome 对 load 事件的行为似乎不同。正如我之前所说,IE 在文档准备好之前加载 iframe,但谷歌浏览器最后加载 iframe。如何让谷歌浏览器在加载事件中表现得像 IE?

以上是关于iframe 上的 onload 事件在 ie 和 firefox/google chrome 中的工作方式不同的主要内容,如果未能解决你的问题,请参考以下文章

angularjs $compile 对 iframe 上的 onload 事件进行错误处理

谷歌浏览器window.onload事件不响应,Safari,Firefox都可以。

文件load事件:imgiframe

如何设置在加载所有动态添加的 iframe 时触发的 window.onload 事件?

iframe 内的 onload 事件仅触发一次

iframe 加载外部资源,显示隐藏loading,onload失效