传智博客
快捷导航
蚂蚁部落 网站首页 实例代码 JS实例 查看内容

iframe跨域高度自适应代码实例

2017-8-28 11:57| 发布者: admin| 查看: 460| 评论: 0|来自: 蚂蚁部落

在实际应用中,很多时候通过<iframe>引入页面,如果同域情况,可以使用以下代码。

代码如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<script type="text/javascript">  
window.onload=function(){ 
  var ifm= document.getElementById("iframepage");  
  var subWeb = document.frames ? document.frames["iframepage"].document:ifm.contentDocument;  
  if(ifm != null && subWeb != null){  
    ifm.height = subWeb.body.scrollHeight;  
  }  
} 
</script>  
</head> 
<body> 
<iframe src="iframe.html" id="iframepage" name="iframepage" width="100%"></iframe> 
</body> 
</html>

以上代码可以实现我们的要求,但是很多时候通过iframe引入的页面是跨域的,上面的代码就不起作用,这是因为在引入外部页面的过程中,由于跨域安全问题会导致报错,如下:

a:3:{s:3:\"pic\";s:43:\"portal/201708/28/115919kt1otbczcnjttfyk.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

因而会导致设置高度的代码无法得到执行,也就无从谈起高度自适应了,可以改变一下思路实现此功能。

我们可以通过一个“中介”来完成此任务。

比如在域A中有一个页面a.html,我们要引入域C中的页面c.html,这样我们可以在域A中再建立一个“中介”页面b.html,作为c.html的子页面,然后获取一些相关信息,最后通过b.html来实现设置a.html中iframe高度的效果,因为b和a是在同域下的,所以不存在安全障碍。

c.html中的代码如下:

[HTML] 纯文本查看 复制代码运行代码
<iframe id="b_id" width="100%" src="http://域A/b.html" style="display:none"> </iframe>   
<script type="text/javascript">     
var c_height=Math.max(document.body.scrollHeight,document.body.clientHeight);     
var b_iframe = document.getElementById("b_id");     
b_iframe.src =  b_frame.src+"#"+b_height;  
</script>

通过url,为"中介"页面b.html传递了c.html的高度信息,这个高度就是a.html中iframe的自适应高度。

b.html中的代码如下:

[JavaScript] 纯文本查看 复制代码运行代码
//得到a.html中的a_iframe  
var a_iframe=parent.parent.document.getElementById("a_iframe");   
var hash_url = window.location.hash;   
//得到传递过来的height属性  
var hash_height = hash_url.split("#")[1]+"px";  
//调整a_iframe的height,达到自适应   
a_iframe.height = hash_height;

综上所述,就可以实现跨域iframe高度自适应效果了。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-12-11 19:21 , Processed in 0.066098 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部