实现跨域iframe自适应高宽的方案

最新推荐文章于 2024-03-14 15:48:00 发布

最新推荐文章于 2024-03-14 15:48:00 发布 · 81 阅读

文章标签：

#javascript #ViewUI

本文介绍了一种解决跨域iframe自适应高度的问题方案。通过引入同域下的代理页面来获取并设置iframe的尺寸，解决了因浏览器安全限制导致的跨域访问问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面域关系：
主页面a.html所属域A：http://172.29.20.21:8080/test;假设地址：http://172.29.20.21:8080/test /a.html

被iframe的页面b.html所属域B：http://172.29.20.22:8080/test假设地址：http://172.29.20.22:8080/test /b.html

实现效果：
A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要同过b.html中的js代码控制a.html中的iframe自适应大小.

问题本质:
js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A、B不属于同一个域,浏览器为了安全性考虑，使js跨域访问受限,读取不到b.html的高度和宽度.

解决方案:
引入代理代理页面c.html与a.html所属相同域A，c.html是A域下提供好的中间代理页面，假设c.html的地址：http://172.29.20.21:8080 /test/c.html,它负责读取location.hash里面的width和height的值,然后设置与它同域下的a.html中的iframe的宽度和高度.

代码如下：

a.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
	<div style="height:100%;width: 100%;overflow-y: scroll">
		<iframe height="671" width="958px;" style="position:absolute;visibility:hidden;z-index:0;overflow-x: hidden;display: none;"></iframe>
    	<iframe id="realIframe" name="realIframe" height="100%" width="958px" frameborder="0" src="http://172.29.20.22:8080/test/b.html" scrolling="no" style="border-right-width: 0px; overflow-x: hidden; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; marginheight: 0px; vspace: 0px;" ></iframe>
  </div>
</body>
</html>

b.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
</head>
<script type="text/javascript">
/**
* Description:重新设置父IFRAME的高度
* Author: roger
* Email:luo.luoyifan
* Version: 1
* @param: 无
**/
function reSizeParentIframe(special){
var realHeight=0;
if (navigator.userAgent.indexOf("Firefox")>0||navigator.userAgent.indexOf("Mozilla")>0||navigator.userAgent.indexOf("Safari")>0) { // Mozilla, Safari, ...
realHeight=window.document.documentElement.offsetHeight + 2;//firefox中HTML和IE中计算不一样，它四舍五入了，所以要加上1才能
} else if (navigator.userAgent.indexOf("MSIE")>0) { // IE
 var bodyScrollHeight = window.document.body.scrollHeight + 21;//取得body的scrollHeight
 var elementScrollHeight = window.document.documentElement.scrollHeight + 1;//取得documentElement的scrollHeight
 if(special){
 realHeight = bodyScrollHeight;
 }else{
 realHeight = Math.max(bodyScrollHeight,elementScrollHeight);//取当中比较大的一个
 }
}else{//其他浏览器
realHeight=window.document.body.scrollHeight + window.document.body.clientHeight + 1;
}
if(realHeight<400){
realHeight = 400;
}
try{
if(window.parent.document){
if($("#realIframe",window.parent.document).is("iframe")){
$("#realIframe",window.parent.document).height(realHeight);
}
}else{
var localIframe = document.getElementById("localIframe");
var hashurl = CFG.sysReSizeUrl+"?timeStr="+getNowTime()+"#"+realHeight;
localIframe.src = hashurl;
};
}catch(e){
var localIframe = document.getElementById("localIframe");
var hashurl = CFG.sysReSizeUrl+"?timeStr="+getNowTime()+"#"+realHeight;
localIframe.src = hashurl;
}
}
reSizeParentIframe();//调用一下重置父iframe的方法
</script>
<body>
<div>此div的高度动态变化</div>
<iframe id="localIframe" style="display: none;" width="0">此iframe用来加载c.html中间代理</iframe>
</body>
</html>

c.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
 var realIframe = window.parent.parent.document.getElementById("realIframe");
 var hash_url = window.location.hash;
 if(hash_url!=""){
  var hash_height = hash_url.split("#")[1]+"px";
  realIframe.style.height = hash_height;
 }
</script>
</head>
<body>
</body>
</html>

具体流程如下：

访问 http://172.29.20.21:8080/test /a.html那么a回去请求b，由于a与b不是一个域的，所以在b页面建一个iframe去请求c，通过c得到b传给c的高度然后对a中的frame进行设置