我不断收到错误"Error: Permission denied to access property 'document'"
,而我已经在我的X-FRAME options
中定义了允许其他域名,就像这样..
<?php
header('X-Frame-Options: ALLOW-FROM http://mydomain.com');
?>
下面是iframe请求的标题,清楚地显示我已经定义允许域访问iframe但不能正常工作。我想要的是使用javascript调整iframe的大小。
以下是我调整iframe高度的javascript代码。
<iframe src="http://mydomain.com/xxx/yyy" id="idIframe" onload="iframeLoaded();" allowtransparency="true" frameborder="0" width="100%" scrolling="no"></iframe>
<script type="text/javascript">
function iframeLoaded() {
var iFrameID = document.getElementById('idIframe');
if(iFrameID) {
iFrameID.height = "";
if(iFrameID.contentWindow.document.body.scrollHeight < 500) {
iFrameID.height = "500px";
} else {
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
}
}
}
</script>
我该怎么做?请建议。
答案 0 :(得分:15)
我最近自己有这个问题。 最后我用postMessage方法解决了它。
在iFrame中包含的文档中,我会检查它是否实际上是从iFrame运行。
function inIframe(){
if(top != self){
var contentHeight = $('#myIframeContent').height(); //Just this part I did with jQuery as I was sure that the document uses it
postSize(contentHeight);
}
}
如果文档在iFrame中运行,请调用我们将调用postSize的函数。
function postSize(height){
var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
if(typeof target != "undefined" && document.body.scrollHeight){
target.postMessage(height, "*");
}
}
将以下代码添加到包含iFrame
的文档中function receiveSize(e){
if(e.origin === "http://www.mywebsite.net"){
var newHeight = e.data + 35;
document.getElementById("myIframeID").style.height = newHeight + "px";
}
}
window.addEventListener("message", receiveSize, false);
不幸的是我不记得所有这些的确切来源,因为我在Stackoverflow上查看了很多不同的解决方案,但也有不同的网站。但这个解决方案对我有用。
干杯
答案 1 :(得分:0)
不确定为什么其他解决方案使用iFrame ID。它也可以在没有以下条件的情况下工作:
iFrame中向外部发送消息的页面
<script>
parent.postMessage('your message', '*');
</script>
父框架:
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
console.log('Message: ', event.data);
}
答案 2 :(得分:-1)
将compatability.js更新为最新版本为我修复了它。