Iframe 中元素的 Select Div

Question

我在同一个域中有两个页面。 Home.html 和 page2.html 是他们的名字。

home.html有以下内容

<html>
    <iframe id="one" src="page2.html" style="display:none"></iframe>
    <div id="container">        
        <h1>Title of Page</h1>
        <div id="ShowHere"></div>
    </div>
</html>

page2.html 有以下内容。

<html>
   <div id="container">
       <span id="target">Some Text</span>
   </div>
   <span>Don't Show This Text</span>
</html>

我想使用一些 javascript 从页面 home.html 上 Id="one" 的 iframe 中获取 "target" 的内容，然后更改元素 id=ShowHere 的 innerhtml 显示元素 "target" 中的 html 这样，它显示单词 "Some Text" 下的单词 "Title of Page"。

我认为下面是一个开始，放在home.html的底部：

<script>
    var frameSource = document.getElementById("one").contentWindow.document.documentElement.outerHTML;
    // ANSWER TO MY QUESTION
    document.getElementById("ShowHere").innerHTML = frameSource;
</script>

我四处搜索并看到了一些应该这样做的答案，但是 none 提供了关于如何做到这一点的有意义的解释，none 我可以开始工作。我更喜欢使用普通香草 javascript，但 Jquery 也可以。

根据我正在尝试做的事情，即从同一域的另一个页面获取 div 的内容（即内部 html），我想知道是否有更好的方法比创建一个不可见的 iframe 然后读取它。也欢迎通过其他机制达到预期结果的答案。

Answer 1

您可以在 iframe 中使用选择器（如 getElementById 等），类似于通过 iframe.contentWindow.document 在 window 中找到的选择器。

所以如果你想获取第二页target的内容，你可以通过document.getElementById("one").contentWindow.document.getElementById("target")

获取

编辑：

您可能还应该等到 iframe 加载完毕后再尝试从中读取元素。所以一共：

var init = function(){
    var frameDocument = document.getElementById("one").contentWindow.document;
    document.getElementById("ShowHere").innerHTML = frameDocument.getElementById("target").innerHTML;
};

if(document.getElementById("one").contentWindow.document.getElementById("target")) { // iframe is loaded
    init();
} else {
    document.getElementById("one").contentWindow.onload = init;
}

Answer 2

使用 this* 问题的答案*

因此，首先您必须找到 iframe：

var iframe = document.getElementById('one');

那么你应该得到 iframe 内容：

var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

现在您可以使用 getElementById 在 iframe 中查找 DOM 元素：

var iframeContent;

if (iframeDocument) {
    iframeContent = iframeDocument.getElementById('target').innerHTML;
}

现在在 iframeContent 中有需要在主页上显示的 span 内容，因此您只需找到要显示 iframeContent 的元素并设置 innerHTML 属性:

var divToShow = document.getElementById('ShowHere');
divToShow.innerHTML = iframeContent;

仅此而已。
希望我的回答能帮助到您解决问题。
谢谢:)

Iframe 中元素的 Select Div

Select Div of Element in Iframe

html

javascript

iframe

jquery

innerhtml

编辑：

使用 this* 问题的答案*

Iframe 中元素的 Select Div

Select Div of Element in Iframe

html

javascript

iframe

jquery

innerhtml

编辑：

使用 this 问题的答案

使用 this* 问题的答案*