萌新最近在写点东西练手,就碰到了这个问题。
这是我的iframe:
<iframe frameborder="0" id="myiframe" name="contentIframe" class="mainContent" src="WebLearning/1.html" scrolling="no" onload="this.height=this.contentWindow.document.body.scrollHeight"></iframe>
照道理说,onload里的内容应该解决了iframe的高度随内容自适应的问题,可在Chrome里打开网页时,却不起作用。F12打开开发者模式,看下控制台消息后,发现这样一个报错:
“Blocked a frame with origin ‘null’ from accessing a cross-origin frame”.这是什么奇怪的东西?百度以后才知道,这个“cross origin”是一个叫跨域的东西。
简单来说,跨域是一个安全限制,它组织我的网站执行其他网站的脚本。在我的这个例子中,iframe的目标指向的是我的文件夹里的某个网页,那Url自然就是以file:///开头的了,这在Chrome看来是属于“跨域”的一种。怎么办呢?
话不多说,解决方法的链接 就在这。
另外我发现,这个问题在FireFox中同样存在,但Edge却没有(说得好,我选择Chrome)。
另外还要注意,在设置iframe高度自适应的时候,javascript函数必须放在iframe的onload属性里,否则单单像这样的话浏览器是不会理你的:
<script>
var ifm = document.getElementById("myiframe");
ifm.height = ifm.contentWindow.document.documentElement.scrollHeight;
console.log(ifm.height);
</script>
参考链接:什么是跨域?如何实现?
来源:CSDN
作者:Tony J
链接:https://blog.csdn.net/weixin_43088751/article/details/103885996