iframe跨域高度自适应解决方法

javascript,html/css 2020-07-21 255 次浏览 次点赞

今天有个项目遇到一个问题,要跨域引用别人的网页,问题来了,这个网页有现成的js接口可供调用,然而这个接口本身也是通过iframe引用他自己的网页。
重点是这个网页有点长,而我在引用过程发现,会出现滚动条无法全部显示。

接口代码如下

<iframe id="api_iframe_666" name="api_iframe_666" src="" width="800px" height="800px"  frameborder="0"></iframe>
<script type="text/javascript">
document.getElementById("api_iframe_666").src = "http://www.test....";
</script>

解决过程
不甘心的我肯定会先自己挣扎的咯,首先我想到的方法自然就是将height设置为100%。
然而令人心碎的是,width设置100%可以正常使用,但是高度却丝毫没有自适应的觉悟。

于是想通过js来实现。

var frame = document.getElementById("api_iframe_666");
frame.height = window.frames[0].document.body.scrollHeight;

事实上,挣扎是毫无意义的,js报错说跨域了。
无奈上网看看其他人遇到这种问题是怎么做的,大概看了一下。分为三种思路。
第一种思路,做一个代理页面用来中转,但是我有点强迫症不太喜欢这个方法,事实上是我也自己测试了但是无效(极大可能是由于我自身的问题)。

第二种思路(测试无效)。

<iframe src="http://www.xxxx.com" id="myiframe" scrolling="no" onload="changeFrameHeight()" frameborder="0"></iframe>

js代码也得跟着改

function changeFrameHeight(){
    var ifm= document.getElementById("myiframe"); 
    ifm.height=document.documentElement.clientHeight;

}

window.onresize=function(){  
     changeFrameHeight();  

} 

第三种思路,就是通过html/css来实现,其实跟我最开始想的思路几乎一致。

<html>  
<head>  
<style>  
body {margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;overflow: hidden;}  
</style>  
</head>
<body>  
<iframe src='http://xxx.xxxx.com/' width='100%' height='100%' frameborder='0' name="_blank" id="_blank" ></iframe>
</body>  
</html>

但是需要注意的最重要两点:
1.文件头必须是一<html>开头
2.scrolling不能为no,否则嵌入的网页不能往下滚;高度设置height:100%;
3.说是overflow: hidden;不能省略。

但是其实我写的body代码除了去外边距和填充就没管了,亲测也有效。
反正就这样解决了,但是我有点迷茫是为什么要去掉最开始的html声明呢。


本文由 大古 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论