iframe跨域高度自适应（动态调整），动态监听跨域子页面高度的改变而改变iframe高度，去除丑陋的滚动条

最新推荐文章于 2023-08-25 14:20:29 发布
最新推荐文章于 2023-08-25 14:20:29 发布
阅读量1.1k 收藏 5
点赞数 1
分类专栏： 前端开发 文章标签： iframe 跨域 自适应 高度自适应 去除滚动条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_24473141/article/details/102579632
版权

目的：系统A的indexA.html页面，用iframe的形式集成系统B的indexB.html页面

方法1：使用使用 HTML5 postMessage。(强烈推荐)

postMessage可以实现跨文档消息传输（Cross Document Messaging），Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage。

indexA.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>系统A - 主页</title>
	</head>
	<body>
		<iframe class="cross-iframe" id="crossIframe" frameborder="no" scrolling="no" width="100%" src="http://localhost:8848/webtest/page/indexB.html">
			
		</iframe>
		<script type="text/javascript">
			window.onload = function(){
				window.addEventListener('message',function(event){
					if(event.origin == "http://localhost:8848") {
						document.getElementById('crossIframe').style.height = event.data + "px";
					}
				})
			}
		</script>
	</body>
</html>

indexB.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>系统B - 主页</title>
	</head>
	<body>
		<div style="background-color: #0000FF;" id="test">
			<input type="number" value="300" id="test_input"/>
		</div>
		<script src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/jquery-resize/1.1/jquery.ba-resize.js"></script>
		<script type="text/javascript">
			//改变页面高度
			$("#test_input").on("change",function(){
				$("#test").height($(this).val());
			});
			$('body').resize(function(){
				var h = document.body.scrollHeight;
				window.parent.postMessage(h, "http://127.0.0.1:8848");	
			});
		</script>
	</body>
</html>

方法2：使用iFrame Resizer插件

indexA.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>系统A - 主页</title>
	</head>
	<body>
		<iframe class="cross-iframe" id="crossIframe" frameborder="no" scrolling="no" width="100%" src="http://localhost:8848/webtest/page/indexB.html">
			
		</iframe>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/iframeResizer/iframeResizer.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$('#crossIframe').iFrameResize({});
		</script>
	</body>
</html>

indexB.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>系统B - 主页</title>
	</head>
	<body>
		<div style="background-color: #0000FF;" id="test">
			<input type="number" value="300" id="test_input"/>
			<button type="button" id="test_btn">提交</button>
		</div>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/iframeResizer/iframeResizer.contentWindow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$("#test_btn").click(function(){
				$("#test").height($("#test_input").val());
			});
		</script>
	</body>
</html>

方法3：使用代理页面实现

由于域名不同导致跨域，A系统的页面（以下A系统页面简称A页）无法获取和操作B系统页面（以下B系统页面简称B页）元素，所以B页需要首先用iframe嵌入A系统的一个页面例如：cross.html，然后B页将自身的高度当做hash值设置到iframe的src中，然后由于cross.html获取自身url上的hash中B页的高度，并将其赋值给A中的iframe。（这里需要说明一下，由于cross.html与indexA.html同属于A系统，所以可以获取并操作A页面的元素，获取方式如:window.parent.parent.document.getElementsByTagName("iframe")（::获取父窗口的父窗口中的所有iframe元素））,代码样例如下：

indexA.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>系统A - 主页</title>
	</head>
	<body>
		<iframe class="cross-iframe" frameborder="no" scrolling="no" width="100%" src="http://localhost:8848/webtest/page/indexB.html">
			
		</iframe>
	</body>
</html>

indexB.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>系统B - 主页</title>
	</head>
	<body>
		<div style="background-color: #0000FF;" id="test">
			<input type="number" value="300" id="test_input"/>
		</div>
		<script src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/jquery-resize/1.1/jquery.ba-resize.js"></script>
		<script type="text/javascript">
			//改变页面高度
			$("#test_input").on("change",function(){
				$("#test").height($(this).val());
			});
			// 监听body高度变化,并将变化后的高度设置到iframe路径中去
			var iframeId = 'iframe_' + new Date().getTime();
			$('body').resize(function(){
			  $("#" + iframeId).length>0 && $("#" + iframeId).detach();
			  var b_width = document.body.scrollWidth;
			  var b_height = document.body.scrollHeight;
			  var iframe = document.createElement('iframe');
			  iframe.src="http://127.0.0.1:8848/webtest/page/cross.html"+ "#" + b_width + "|" + b_height + "|" + iframeId;
			  iframe.style.display="none";
			  iframe.id = iframeId
			  document.body.appendChild(iframe);
			});
		</script>
	</body>
</html>

cross.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>跨域集成页</title>
	</head>
	<body>
		<script type="text/javascript">
			// 获取到当前路径上的hash值,并将其赋值给父窗口所在的iframe
		    window.onload =function (ev) {
		        var hash_url = window.location.hash;
		        if(hash_url.indexOf("#")>=0){
		            var hash_width = hash_url.split("#")[1].split("|")[0]+"px";
		            var hash_height = hash_url.split("#")[1].split("|")[1]+"px";
		            var hash_id = hash_url.split("#")[1].split("|")[2];
		            var iframes =window.parent.parent.document.getElementsByTagName("iframe");
		            for(var i=0;i<iframes.length;i++){
		                var currIframe = iframes[i];
		                if(currIframe.className.indexOf("cross-iframe")>-1 && !currIframe.id){
		                    currIframe.style.height = hash_height;
		                    currIframe.id=hash_id;
		                }else if(currIframe.className.indexOf("cross-iframe")>-1 && currIframe.id==hash_id){
		                    currIframe.style.height = hash_height;
		                }
		            }
		        }
		    }
		</script>
	</body>
</html>

 

码客超
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
完美解决跨域iframe的高度自适应
05-25
完美解决跨域iframe的高度自适应,完美解决跨子域iframe的高度自适应，嵌入几个页面解决跨域iframe的高度自适应。。。
Iframe 高度自适应（兼容IE/Firefox、同域/跨域）
12-10
随之而来的就是在实际使用iframe中，会遇到iframe高度的问题，由于被嵌套的页面长度不固定而显示出来的滚动条，不仅影响美观，还会对用 户操作带来不便。于是自动调整iframe的高度就成为本文的重点。 采用JavaScript来控制iframe元素的高度是iframe高度自适应的关键，同时由于JavaScript对不同域名下权限的控制，引 发出同域、跨域两种情况。 同域时Iframe高度自适应 下面的代码兼容IE/Firefox浏览器，控制id为“iframeid”的iframe的高度，通过JavaScript取得被嵌套页面最终高度，然 后在主页面进行设置来实现。 代码如下，可复制。另外，
如何设置iframe高度自适应在跨域情况下的可用方法
09-05
iframe的高度需要根据子页面的实际高度来进行调整，但是如果子页面不在同一域中怎么办？这时候脚本没有办法获取到子页面的高度，存在JavaScript跨域的问题
IFrame跨域高度自适应实现代码
09-05
最近在做项目中，遇到一个问题，就是iframe高度的自适应问题，以下是解决办法
动态修改iframe高度，从而自适应内容真实高度
Cheney的博客
09-08 3422
项目中遇到这样的情况，需要用到iframe，iframe中的内容也是自己写的页面，由于页面中元素是异步加载出来的，并不能提前预知其高度，这样就不能设置iframe的高度，导致iframe会出现滚动条，用户体验不好。所以我需要能根据内容动态改变iframe的高度。 dom结构如下 <!-- iframe --> <iframe id="iframe" scrolling="no" src="./iframe/page"></iframe> <!-- ./ifr
iframe动态适应页面高度
03-03
iframe是网页设计中经常用来装载子页使用的,如何让iframe随着动态装载的子页(主页不刷新)自动适应所装子改变在小是我们经常要处理的问题;现给出两个非常简单的例子,从不同的角度来实现iframe根据最新加载的子页自动调整高度.....
内联框架：iframe跨域处理及高度计算
qq_42961150的博客
12-24 1316
iframe在web前端开发中很常见，iframe嵌入的页面与当前页面是在同一个域名下，是不存在跨域。但是在主域相同，子域不同的情况下，就会存在跨域，可以使用document.domain去解决。 iframe一般需要主动设置高度才会完全显示嵌入页面的内容，而内容可能会在迭代的时候变化，所以如果iframe的高度写死，那么就显得这个iframe不够智能。可以通过js去计算内容的高度，然后给iframe进行设置动态高度。
动态获取并设置 iframe 自适应高度
张兴华的博客
08-31 2238
实际需求：页面中有一些固定元素 + 内嵌 iframe 页面，此时如果给 iframe 设置固定高度会导致 iframe 内部滚动，体验不佳。于是需要动态获取 iframe 实际高度并设置，但有些 iframe 页面会有占位 loading or 骨架屏等，导致一开始就获取高度会不准。所以给出解决方案如下：...
Iframe 自适应宽高
Murpny的博客
09-02 1614
Iframe 自适应宽高
iframe解决方案
最新发布
szr190的博客
08-25 328
为了更好的用户体验，尤其是在iframe高度上，可以采用这个插件。
小tip：iframe高度动态自适应
weixin_34184158的博客
08-16 242
一、前言碎碎念 我从来对iframe就没有什么好感，对其基本上是不屑一顾。但是人在江湖，身不由己。经理发话，新功能使用iframe实现，没办法，只好折腾，两大烦人的东西，一是带遮罩的弹框提示，而是iframe高度问题。前一个烦人的问题使用其他形式的提示来规避，后一人扰人的问题确实没有什么经验，花了点时间折腾了下，基本上实现了效果，跨域没问题，兼容性也没问题，于是，写个小文备忘下，下次再使用的时候...
深入了解iframe内嵌框架：探究其工作原理
winkexin的博客
06-29 819
如果您想在您的网站上嵌入视频或音频等外部内容，内嵌框架 (iframe) 已被证明对此非常有用。标签提供了一种简单而优雅的解决方案来容纳 HTML 文档中的外部内容。通常，网站访问者甚至不会注意到他们正在查看外部内容。但是如何添加 iframe 呢？
跨域iframe如何实现高度自适应？
weixin_30892987的博客
02-13 148
经常有项目会要求实现iframe高度自适应，如果是同域的还好说，如果是跨域的，父页面没有办法操作子页面，想要正确获取子页面高度的话，可以采用以下办法： 方法一：使用HTML5 postMessage 实现原理：子页面检测页面高度通过postMessage将值传给父页面 父页面: http://www.parent.com <iframe src="http://www.child...
iframe跨域通信(设置高度)
你蠢哭我咯的博客
03-12 309
主页面html <iframe width="100%" id="yqiframe" name="sendMessage" src="https://m.abc.cn/test.html" frameborder="0" scrolling="no"></iframe> 主页面js $(function () { var ifr = window.frames['s...
监听页面高度变化_js监听某个元素高度变化来改变父级iframe的高度
weixin_33456137的博客
12-23 1101
最近需要做一个iframe调用其他页面内容，这个iframe地址是可变化的，但是里面的内容高度不确定且里面内容高度可调整，所以需要通过监听iframe里面body的高度变化来调整iframe的高度。后面发现了一个好用的插件detect-element-resize.js，首先看一下这个插件的介绍：插件简介跨浏览器，基于事件，元素调整大小检测。简而言之，此实现不使用内部计时器来检测大小更改(就像我发...
动态设置IFrame的高度
Studentyouyou的专栏
12-16 788
由于最近想实现网页局部刷新，使用的IFrame，只要给IFrame赋给新的src值，便可以加载不同的页面了。但让人烦恼的问题也随之而来了，那便是IFrame自身的高度随子页面而变化。上网搜了好多方法，发现都不适用。 很多人的方法都是这样的。在IFrame中设置 onload="autoHeight();“ function autoHeight(){         va
iframe或document监听滚动事件不起作用
卿本无忧的博客
03-01 2246
iframe或document监听滚动事件不起作用
动态的改变iframe高度
SinFeeLoo
10-23 721
function IFrameResize(){        var obj = parent.document.getElementById("iframe1");  //取得父页面IFrame对象        obj.height =1172;  //调整父页面中IFrame的高度为此页面的高度              }
根据iframe里面的内容高度动态设置iframe高度
u011511086的专栏
06-18 858
<iframe id="stageFrame" onload="iframeLoad()" src="/home/index" style="width:100%;height:auto;overflow-x:hidden;overflow-y:hidden;"></iframe> //根据iframe里面的内容高度动态设置iframe高度 function iframeLoad() { var ifr = document.getElementById('s
iframe跨域高度自适应
08-25
为了实现iframe的跨域高度自适应，你可以使用以下步骤： 1. 在父页面中，先获取到子页面的高度。可以通过子页面中的某个元素或者API来获取子页面的高度信息。 2. 使用window.postMessage方法将子页面的高度发送给父页面。在子页面中，需要监听message事件，并将子页面的高度发送给父页面。 在父页面中，添加以下代码： ```javascript // 监听来自子页面的消息 window.addEventListener('message', function(e) { // 确保消息来自于预期的子页面 if (e.origin !== '子页面的域名或URL') { return; } // 获取子页面传递过来的高度 var height = parseInt(e.data); // 设置iframe的高度 document.getElementById('yourIframeId').style.height = height + 'px'; }); ``` 在子页面中，添加以下代码： ```javascript // 获取子页面的高度 function getHeight() { var height = document.body.offsetHeight; // 将高度信息发送给父页面 window.parent.postMessage(height, '父页面的域名或URL'); } // 监听父页面传递过来的消息 window.addEventListener('message', function(e) { // 确保消息来自于预期的父页面 if (e.origin !== '父页面的域名或URL') { return; } // 获取父页面传递过来的高度 var height = parseInt(e.data); // 设置子页面的高度 document.body.style.height = height + 'px'; }); // 在页面加载完成后获取页面高度并发送给父页面 window.onload = function() { getHeight(); }; ``` 在上述代码中，你需要替换`子页面的域名或URL`和`父页面的域名或URL`为你实际使用的域名或URL。`yourIframeId`需要替换为你iframe元素的ID。 通过这种方式，子页面可以将自身的高度信息发送给父页面，父页面则可以根据接收到的高度信息来动态调整iframe的高度，实现跨域高度自适应。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值