Tir*_*ing 0 html javascript iframe jquery innerhtml
我在同一个域上有两个页面.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从iframe中的id ="one"获取"target"的内容,然后更改元素id = ShowHere的innerhtml以显示元素中的html"目标"这样,它在"页面标题"一词下面显示"Some Text"字样.
我认为以下是一个开始,放在home.html的底部:
<script>
var frameSource = document.getElementById("one").contentWindow.document.documentElement.outerHTML;
// ANSWER TO MY QUESTION
document.getElementById("ShowHere").innerHTML = frameSource;
</script>
我已经四处搜索并看到了一些应该这样做的答案,但没有一个能提供有关如何做到这一点的有意义的解释,而且没有一个我可以开始工作.我更喜欢使用普通的jilla javascript,但Jquery也没问题.
基于我想要做的事情,即从同一个域上的另一个页面获取div的内容(即innerhtml),我想知道是否有比创建不可见的iframe更好的方法然后阅读它.通过另一种机制获得预期结果的答案也是受欢迎的.
所以,首先你必须找到iframe:
var iframe = document.getElementById('one');
然后你应该得到iframe内容:
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
现在您可以使用getElementByIdiframe中的DOM元素:
var iframeContent;
if (iframeDocument) {
iframeContent = iframeDocument.getElementById('target').innerHTML;
}
现在,在iframeContent中,您需要在主页面上显示span的内容,因此您可以找到要显示iframeContent的元素并设置innerHTML属性:
var divToShow = document.getElementById('ShowHere');
divToShow.innerHTML = iframeContent;
就这样.
我希望我的回答可以帮助您解决问题.
谢谢 : )