在 iframe 上使用 javascript 时 Firefox 的奇怪行为

发布于 2024-09-09 22:44:13 字数 990 浏览 10 评论 0原文

我在 Firefox 中使用这个简单的脚本遇到了一个奇怪的行为：

    <html>
      <head>
        <script type="text/javascript">
            window.setTimeout(function(){
                var ifr=document.createElement("iframe");
                ifr.src="about:blank";
                document.body.appendChild(ifr);
                var doc=ifr.contentDocument || ifr.contentWindow.document,
                    div=doc.createElement("div");
                div.innerHTML="test";
                window.setTimeout(function(){
                    doc.body.appendChild(div);
                },500);
            },500);
        </script>
    </head>
  </html>

这段代码创建一个空白 iframe 并将其附加到当前页面的正文，然后创建一个包含简单文本的 div 元素并将其附加到正文iframe 的。

在每个浏览器（IE、Safari、Chrome、Opera）中它都可以工作，但在 Firefox（我使用的是版本 3.6.3）中，div 不会出现在 iframe 内，也不会引发错误。

我认为某个地方一定有一些愚蠢的错误，但我找不到它，你有什么想法吗？

PS：这些 window.setTimeout 只是确保 dom 加载到页面和 iframe 中的简单方法。

原文

i've met a strange behaviour in Firefox with this simple script:

    <html>
      <head>
        <script type="text/javascript">
            window.setTimeout(function(){
                var ifr=document.createElement("iframe");
                ifr.src="about:blank";
                document.body.appendChild(ifr);
                var doc=ifr.contentDocument || ifr.contentWindow.document,
                    div=doc.createElement("div");
                div.innerHTML="test";
                window.setTimeout(function(){
                    doc.body.appendChild(div);
                },500);
            },500);
        </script>
    </head>
  </html>

This piece of code creates a blank iframe and appends it to the body of the current page, then it creates a div element that contains a simple text and appends it to the body of the iframe.

In every browser (IE, Safari, Chrome, Opera) it works, but in Firefox (i'm using the version 3.6.3) the div does not appear inside the iframe and no error is thrown.

I think that there must be some stupid error somewhere but i can't find it, have you got some idea?

PS: those window.setTimeout are just a simple way to make sure that the dom is loaded in the page and in the iframe.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笑着哭最痛 2024-09-16 22:44:13

您需要将 iframe 文档的检索包含在超时中。

        window.setTimeout(function(){
            var doc=ifr.contentWindow.document || ifr.contentDocument;
            var div=doc.createElement("div");
            div.innerHTML="test";
            doc.body.appendChild(div);
        },500);

请参阅http://jsfiddle.net/xeGSe/1/

You need to wrap the retrieval of the iframe doc in the timeout.

        window.setTimeout(function(){
            var doc=ifr.contentWindow.document || ifr.contentDocument;
            var div=doc.createElement("div");
            div.innerHTML="test";
            doc.body.appendChild(div);
        },500);

See http://jsfiddle.net/xeGSe/1/

回复收藏 0 原文

柠北森屋 2024-09-16 22:44:13

看起来您的 setTimeout 调用未捕获计时问题。您最好使用 onload 事件来确保元素真正可用（DOMReady 会更好，但在 IE 中并不那么容易）。试试这个：

document.body.onload = function() {
    var iframe = document.createElement("iframe");
    iframe.src = "about:blank";
    iframe.onload = function() {
        var doc = iframe.contentDocument || iframe.contentWindow.document,
            div = doc.createElement("div");
        div.innerHTML="test";
        doc.body.appendChild(div);
    }
    document.body.appendChild(iframe);
}

Looks like a timing issue that your setTimeout calls aren't catching. Your better off using onload events to ensure elements are truly available (DOMReady would be better but not as easy in IE). Try this:

document.body.onload = function() {
    var iframe = document.createElement("iframe");
    iframe.src = "about:blank";
    iframe.onload = function() {
        var doc = iframe.contentDocument || iframe.contentWindow.document,
            div = doc.createElement("div");
        div.innerHTML="test";
        doc.body.appendChild(div);
    }
    document.body.appendChild(iframe);
}

回复收藏 0 原文

~没有更多了~