我一直在尝试用iframe整合另一个页面的内容。 这是我所能找到的用于此实现的源代码的最佳方法。
<script>
function resizeIframe(iframe) {
iframe.style.height = iframe.contentWindow.document.documentElement.scrollHeight + 'px';
}
</script>
<iframe src="https://another-backend-domain.com/bnt" frameborder="0" width="100%" onload="resizeIframe(this)"></iframe>
这里的问题是，onload函数被认为是交叉起源的。 对于同一域上的页面，这种方法可以很好地工作。。。
Uncaught DOMException: Blocked a frame with origin "https://original-website.com" from accessing a cross-origin frame.
at resizeIframe (https://original-website.com/site/:239:42)
at HTMLIFrameElement.onload (https://original-website.com/site/:241:112)
如果有人能帮我解决这个问题，我会很高兴的，因为即使经过许多小时的研究，我仍然不能找到一个好的方法来解决这个问题。 我的iframe的默认高度只是太小了，但是我无法在px中手动定义高度，因为内容高度是每小时更改一次的……
查看JavaScript的postmessage函数。 它允许您在iframe和top窗口之间发送和接收消息。
从iframe发送消息，其中包含:
Window.top.PostMessage（{type:“MyEvent”，height:x}，*)；
在顶部窗口中接收消息，其中包括:
window.onmessage = function (event) {
if (event.data.type && event.data.type == "myevent") {
var iframeHeight = event.data.height;
}
};
您还可以检查event.origin以确保targetorigin与窗口域匹配以获得额外的安全性。
再见，
我会尝试用这个答案中的简单片段来修复，甚至不需要插入JavaScript
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.example.com/video" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>
祝你周末愉快，
Antonino
