问题描述
我有一个 iframe 正在呈现来自另一个域的内容。显然我无法从其他域访问 contentDocument
(返回 null
)。但是当用户对呈现的 iframe 执行操作时,它会重定向回我的域。所以那时我能够阅读文档。基本上一旦 contentDocument 不是 null
,我想执行一个操作。
目前我只是想在 iframe 的子级(在这种情况下它的 contentDocument
发生变异...
window.onload = () => {
setTimeout(initializeObserver,2000)
}
const initializeObserver = () => {
const iframe = document.getElementById('my_iframe')
observer.observe(
iframe,{
attributes: true,childList: true,subtree: true
}
)
}
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if(mutation.addednodes.length) {
alert("SOMETHING HAPPENED!")
}
})
})
但即使添加了子节点并且 iframe 中的元素发生变化,警报也不会触发。我已经阅读了很多示例,但也许我仍然缺少它是如何工作的。有人可以帮助解释为什么这个观察者没有触发突变吗?
提前致谢
解决方法
当 <iframe>
中的浏览上下文更改其 location
时,包含 src
的 <iframe>
属性不会改变,因此您的页面看不到任何区别。
既然您显然控制了另一个页面,那么您可以做的是post a message 到您的主页。
然后你只需要听那个消息,你就知道你的框架已经回来了。
// in main
addEventListener("message",(evt) => {
if( evt.origin === location.origin && evt.data === "I'm back" ) {
// your page came back
}
});
// in framed page
top.postMessage( "I'm back",location.origin );