实现跨域Iframe高度自适应调整

╰半橙微兮° 2022-01-10 18:13 348阅读 0赞

背景说明：我开发了一个页面框架，里面通过Iframe嵌入第三方应用。但第三方应用有多个，页面高度不一样，而且在使用过程中还会动态变化。我外面Iframe的高度就要跟随里面的应用来变化。

这样就要求第三方应用页面高度变化时要控制外围Iframe的高度跟随变化，但直接的js控制是行不通的，因为第三方应用和我的框架在不同域，浏览器因为安全原因会禁止应用通过js控制外面框架的DOM对象。同理，外围框架也不能控制Iframe内应用的DOM对象。

要实现真正的跨域调用，必须通过一个代理页面来实现。原理如下：

存在3个页面，http://frame.com/frame.html：我的框架页面

http://app.com/app.html：第三方应用的页面

http://frame.com/agent.html：代理页面

注意，框架页面和代理页面必须是同一个域的，这样才能通过代理页面控制框架而绕过安全限制。

这样我们就可以在app.html中获取页面的高度，然后通过 agent.html\#hash的机制把高度传递给agent.html页面，最后在agent.html页面中获取高度然后调整frame.html中Iframe的高度。这就有个前提，要求你可以修改app.html，或者可以要求app.html做些修改。为了方便第三方修改，我在一个agent.js中实现了这些修改，第三方应用只要引用这个js就可以了。

agent.js代码如下：

function sethash()\{

var oldHash=0;

var urlC = "http://frame.com/agent.html";

var iframe=document.createElement('iframe');

iframe.id="iframeC"

iframe.name="iframeC";

iframe.width=0;

iframe.height=0;

iframe.style.display="none";

document.body.appendChild(iframe);

//document.body.innerHTML+='<iframe id="iframeC" name="iframeC" src="" width="0" height="0" style="display:none;" ></iframe>';

setInterval(function()\{

var bHeight = document.body.scrollHeight;

var dHeight = document.documentElement.scrollHeight;

var oHeight = document.body.offsetHeight;

var hashH =Math.min(oHeight,Math.min(bHeight,dHeight));

if(oldHash!=hashH)\{

document.getElementById("iframeC").src=urlC+"?"+Math.random()+"\#"+hashH;

\}

oldHash=hashH;

\},200);

\}

if(window.addEventListener)\{

window.addEventListener("load",sethash,false);

\}else\{

window.attachEvent("onload",sethash);

\}

agent.html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head><title>frame agent</title></head>

<body>

<script type="text/javascript">

function pseth() \{

var iObj = parent.parent.document.getElementById('frame\_cont');

iObjH = window.location.hash;

//iObjH = parent.parent.frames\["frame\_cont"\].frames\["iframeC"\].location.hash;

iObj.style.height = iObjH.split("\#")\[1\]+"px";

\}

pseth();

</script>

</body>

</html>

这里有几个需要注意的地方

1、agent.js中创建隐藏的iframe要使用DOM函数操作，不能用innerhtml，在IE等浏览器上用innerhtml会导致一些绑定的js事件失效。

2、在设置定时器重新调用agent.html时需要带随机数参数，不然有些浏览器由于缓存会不调用。

3、在app.html中调用agent.js,

<script type="text/javascript" src="http://frame.com/setHash.js"></script>

转载于:https://blog.51cto.com/shenxinyu/599511

发表评论取消回复

表情：

评论列表（有 0 条评论，348人围观）

还没有评论，来说两句吧...

相关阅读

相关 iframe高度自适应

前提：父页面是功能选项，固定在网页上。在网页留出的空白部分，用于嵌套子页面为了美观和用户体验，子父页面共用子页面的纵向滚动条，且子页面的内容是变化的，所以要设置iframe

- 日理万妓/ 2023年06月02日 14:00/ 0 赞/ 23 阅读

相关 iframe自适应高度

function setIframeHeight(iframe) \{ if (iframe) \{ var iframeWin

妖狐艹你老母/ 2022年09月24日 08:29/ 0 赞/ 293 阅读

相关 iframe自适应高度

[JS][]自适应高度，其实就是设置[iframe][]的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。如果内容是固定的，

落日映苍穹つ/ 2022年07月15日 15:49/ 0 赞/ 320 阅读

相关 iframe框架高度自适应

在写jsp页面时，在主页面中用到了iframe标签嵌套子页面的情况，这种情况，子页面中的内容有的多有的少，所以iframe的高度也要自动适应，在网上找到了这个方式，记录一下；

超、凢脫俗/ 2022年06月09日 13:08/ 0 赞/ 340 阅读

相关 iframe自适应高度

<iframeοnlοad="this.height=this.document.documentElement.scrollHeight"name="reportsFrame

柔光的暖阳◎/ 2022年04月14日 05:20/ 0 赞/ 364 阅读

相关跨域自适应高度——iframe

原文：http://www.chinaz.com/web/2011/1123/222158.shtml 采用JavaScript来控制iframe元素的高度是iframe高度

一时失言乱红尘/ 2022年03月19日 04:18/ 0 赞/ 324 阅读

相关 iframe高度自适应

<iframe src="index.html" onload="this.height=this.contentWindow.document.body.scrol

心已赠人/ 2022年03月17日 16:28/ 0 赞/ 378 阅读

相关实现跨域Iframe高度自适应调整

背景说明：我开发了一个页面框架，里面通过Iframe嵌入第三方应用。但第三方应用有多个，页面高度不一样，而且在使用过程中还会动态变化。我外面Iframe的高度就要跟随里面的应用

╰半橙微兮°/ 2022年01月10日 18:13/ 0 赞/ 349 阅读

相关 iframe自适应高度（转）

iframe自适应高度 ![此博文包含图片][sg_trans.gif](2013-04-23 17:29:49) <table> <tbody> <tr>

比眉伴天荒/ 2022年01月05日 05:51/ 0 赞/ 412 阅读

相关 iframe高度自适应

子页面头部是： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w

柔光的暖阳◎/ 2021年07月26日 12:30/ 0 赞/ 574 阅读