iframe上的onload事件在ie和firefox / google chrome中的工作方式不同

时间:2013-10-21 11:05:07

标签: javascript jquery asp.net iframe

这是我的iframe的aspx页面

 <asp:UpdatePanel ID="dynamicForm" runat="server" UpdateMode="Conditional">
            <ContentTemplate>                    
                <iframe id="iTargetLoader" name="iTargetLoader" width="200" height="50" onload="onLoadFn()"></iframe> 
            </ContentTemplate>
   </asp:UpdatePanel>

这是我在javascript中用于iframe

的onload事件的onloadfn函数
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时或者onload事件中的谷歌浏览器,iframe的加载没有完成,因此内部html显示为null。但是在IE中,加载首先完成,而innerhtml显示反馈。我该如何解决?

1 个答案:

答案 0 :(得分:1)

所以你的问题更多的是让它跨浏览器兼容: 让我们先搞清楚......

HTML或ASPX

使用引用this,这样您就不需要多次获取该对象。

<iframe id="iTargetLoader" name="iTargetLoader" width="200" height="50" 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中工作^^