Chrome下的iframe高度自适应问题

萌新最近在写点东西练手,就碰到了这个问题。
这是我的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>

参考链接:什么是跨域?如何实现?

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值