Question

html就像这样

<iframe id="MainFrame">
  <div id="Maintest">This is main text
        <div id ="SecondTest">This is second layer 
            <div id="ThirdTest">This is third layer</div>
        </div> 
  </div>
</iframe>

访问框架中元素的javascript就像这样

var iframe = document.getElementById('MainFrame');
    var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
    console.log(iframe);
    var mydiv = innerDoc.getElementById("Maintest");
    console.log(mydiv);
    var seconddiv = innerDoc.getElementById("SecondTest");
    var thirddiv = innerDoc.getElementById("ThirdTest");
    console.log(seconddiv+thirddiv);

mydiv，seconddiv以及thirddiv给出null。我在很多帖子上看到这是访问iframe元素的方式。我不知道为什么它给null.Help赞赏。

由于斯瓦拉杰

Answer 1

我相信你使用iframe的实现是不正确的。 <iframe>标记内的任何内容都是针对不支持iframe的浏览器显示的内容。只有两种方法可以将内容插入到我知道的iframe中：

<iframe src="/example/content.html">Your browser doesn't support iframes.</iframe>

并使用javascript使用innerDoc引用将子节点附加到iframe，例如：

innerDoc.body.appendChild(child_ref);

<强>更新

为了清楚起见，您要在iframe中引用的html内容需要位于单独的文件中，例如my_content.html，而iframe需要在“src =”字段中引用该文件，例如：<iframe src="my_content.html">。

Id的iframe元素访问给出null

1 个答案: