我有一个iframe，当页面通常切换到另一个页面时，它会改变src页面，以便我的主JS文件可以继续在后台运行。对于第一页，即在HTML src中为Iframe定义的页面，我可以通过使用Iframe . contentdocument访问内部文档。
然而，当我改变src, contentDocument不改变它，我不能在JS中访问Iframe的文档。
所以有没有办法访问一个Iframe的新文档后改变其源在JS?或者我做事的方式有更简单的选择吗?谢谢。
How I've try:
iframe.src = "pages/home/home.html"
innerDoc = iframe.contentDocument || iframe.contentWindow.document
和innerDoc不改变原始页面。我甚至尝试制作一个全新的Iframe，从未将原始页面作为其src
document.body.removeChild(iframe)
let i = document.createElement('iframe')
i.src='pages/home/home.html'
document.body.appendChild(i)
innerDoc = i.contentDocument || i.contentWindow.document
这只是使innerDoc成为一个空的HTML文档，头和体都是空的。
看起来你在iframe内加载的页面来自与父窗口相同的域-所以你不应该需要消息传递。
但是，您将需要等待"加载"。事件，然后再访问页面内容。这对任何网页都是一样的，而不仅仅是一个嵌入在iframe中的网页。注意，您不能访问iframe的contentWindow，直到它被附加到DOM:
let i = document.createElement('iframe');
// go ahead and attach it to the dom - you can "hide" it with css
document.body.appendChild(i);
// now that you can access the contentWindow, attach a "load" event
i.contentWindow.addEventListener('load', () => {
// now you should be able to access the content
});
// do this last to avoid race conditions with caching and what not
// this might not be necessary, but it doesn't hurt
i.src='pages/home/home.html'
可以"hide"如果你想的话，可以这样设置iframe:
iframe {
position: absolute;
top: -9999em;
width: 1px;
height: 1px;
}
父页面: iFrame页面(s)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>main Page</title>
<style>
body { font-size: 16px; font-family: Arial, Helvetica, sans-serif; }
iframe { width: 24em; height: 15em; border:3px solid blue; }
#get-iframe-info { width: 24em; border: 1px solid orange; padding: .5em; }
</style>
</head>
<body>
<h4>main page</h4>
<p>parent input :
<input id="in-txt" type="text" placeholder="type something">
<button id="Bt-Send2iFrame">Send2iFrame</button>
</p>
<p> iframe part : <br>
<iframe id="iFrame-01" src="page_iFrame.html" frameborder="0"></iframe>
</p>
<p id="get-iframe-info">iframe return: <br>>
<span></span>
</p>
<script>
const
inTxt = document.querySelector('#in-txt')
, btSend = document.querySelector('#Bt-Send2iFrame')
, iFrame01_ct = document.querySelector('#iFrame-01').contentWindow
, sp_getiFram = document.querySelector('#get-iframe-info span')
;
btSend.onclick =_=>
{
let info = { txt: inTxt.value }
iFrame01_ct.postMessage( JSON.stringify(info), "*")
}
window.onmessage=e=>
{
let info = JSON.parse( e.data )
sp_getiFram.textContent = info.txt
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body { font-family: 'Courier New', Courier, monospace; font-size: 14px;}
p { width: 20em; border: 2px solid aquamarine; padding: .5em; }
</style>
</head>
<body>
<h4>page iFrame</h4>
<input id="inTxt" type="text" placeholder="send text">
<button id="btSend">send to parent</button>
<p id="get-parent-info"> info from Parent: <br>>
<span></span>
</p>
<script>
const sp_infoParent = document.querySelector('#get-parent-info span')
;
btSend.onclick =_=>
{
let info = { txt: inTxt.value }
window.parent.postMessage( JSON.stringify(info), "*")
}
window.onmessage=e=>
{
let info = JSON.parse( e.data )
sp_infoParent.textContent = info.txt
}
</script>
</body>
</html>