Search code examples
javascriptfirefoxalertdesignmode

Why a pop-up alert can affect "designMode"?

I was expreimenting to build a page editor. One issue just drove me crazy in firefox.

The page code is below:

<body>
<iframe WIDTH=200 HEIGHT=200 id="myEditor"></iframe>
<script>

    function getIFrameDocument(sID){
        // if contentDocument exists, W3C compliant (Mozilla)
        if (document.getElementById(sID).contentDocument){
            alert("mozilla"); // comment out this line and it doesn't work
            return document.getElementById(sID).contentDocument;
        } else {
            // IE
            alert("IE");
            //return document.getElementById(sID);
            return document.frames[sID].document;
        }
    }

    getIFrameDocument("myEditor").designMode = "On";

</script>

</body>

It just check whether it is approprate to set "designMode" in Mozilla way or IE way. When the page loads, a "Mozilla" pops up; click the iframe area, and the focus is on the iframe and I can input with keyboard.

This looks fine, but when I comment out the line “alert("mozilla");”， it doesnt work. The "designMode" is "Off" as FireBug shows.

This is so wired. Why a alert can affect the DOM and javascript? BTW, my Firefox is 3.0.6.

Solution

  • Because the alert gives the iframe time to load. You should set designMode to "on" only after the iframe document has loaded:

    iframe.onload = function() {
    doc.designMode = "on";
};