react 计算iframe高度

合集下载

JS 设置 IFRAME 高度随其内容改变而改变(两种情况：初始化时,与初始化后)

iframe之间通信问题及iframe自适应高度问题

iframe之间通信问题及iframe⾃适应⾼度问题下⾯本⼈来谈谈iframe之间通信问题及iframe⾃适应⾼度问题。

综合上⾯的思路就可以写个这样的代码：<iframe src="http://localhost/demo/iframe/iframeB.html" id="iframeA" name="iframeA"></iframe><div id="topName">topNddddddddddddddddame</div><script>function A(){alert("A");}var iframe = document.getElementById('iframeA');iframeIsLoad(iframe,function(){var obj = document.getElementById('iframeA').contentWindow;obj.b();});function iframeIsLoad(iframe,callback){if(iframe.attachEvent) {iframe.attachEvent('onload',function(){callback && callback();});}else {iframe.onload = function(){callback && callback();}}}</script>B.html 代码如下：var b = function(){alert("B");}2.⼦页⾯调⽤⽗页⾯的函数很简单，只要这样搞下就ok了，window.parent.A();3. ⼦页⾯取⽗页⾯元素的值： window.parent.document.getElementById("topName").innerHTML等⽅法。

【转载】真正解决iframe高度自适应问题

【转载】真正解决iframe⾼度⾃适应问题1.前⾔解决iframe⾼度⾃适应问题有两种⽅法1.2.⼿动设置iframe的⾼度本⽂主要是总结第⼆种实现⽅式，因为第⼀种pym.js插件我没⽤懂如果使⽤iframe时，遇到以下的需求：iframe的⾼度始终等于嵌⼊页⾯内容的⾼度，⽽不是屏幕的⾼度右侧不允许出现两个滚动条iframe的⾼度⾃适应不仅仅是指刚加载进来时，也有可能嵌⼊内容的⾼度会随点击变化（如：下拉菜单，左侧导航栏等）页⾯可能同时嵌⼊多个iframe2.contentWindow对象*需要起个服务，不要直接在本地打开这是个只读属性，返回指定的iframe的window对象拿到这个对象，就可以根据正常⽹页的⽅法拿到嵌⼊（⼦）⽹页的⽂档⾼度，然后把值附给⽗页⾯的iframe的height。

setInterval(function () {setIframeHeight($('#iframe')[0])}, 200);页⾯有可能同时存在多个iframe$(".flexiframe").each(function (index) {//iframe公⽤类名：flexiframevar that = $(this);(function () {setInterval(function () {setIframeHeight(that[0])}, 200)})(that)});如果此时，你发现当⼦页⾯⾼度变⾼时，⾼度可以⾃适应的变⾼，但在变低时，会发现⽗页⾯的⾼度并没有向我们想象的随着⼦页⾯降低，导致底部留有⼤⾯积空⽩的问题，请继续往下看3.⽂档声明的重要性将⼦页⾯的⽂档声明改为就好了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">4.demo⽗页⾯：a.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>a</title></head><body style="background-color:red"><iframe id="iFrame" class="flexiframe" src="./b.html" style="padding: 0;width:100%;" marginwidth="0" frameborder="no" scrolling="no" height="2000px"></iframe> <script src="https:///jquery/3.3.1/jquery.js"></script><script src="./flexiframe.js"></script></body></html>./flexiframe.js// 使⽤前先将⼦页⾯⽂档声明改为//<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">function setIframeHeight(iframe) {if (iframe) {var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;if (iframeWin.document.body) {iframe.height = iframeWin.document.body.scrollHeight;}}};$(".flexiframe").each(function (index) {var that = $(this);(function () {setInterval(function () {setIframeHeight(that[0])}, 200)})(that)});⼦页⾯b.html，分别注释两种声明⽅式，点击变⼤变⼩按钮看⼀下右侧滚动条的变化，（细节可以F12看⼀下iframe种的html和body跟div的⾼度关系）<!DOCTYPE html><div id="b_conntent"><div style="width:100px;background-color:blue"><div style="height:2000px"><button id="btn">⼩</button></div></div></div><script src="https:///jquery/3.3.1/jquery.js"></script><script>$('#btn').on('click', function () {if ($(this).text() == '⼩') {$(this).text('⼤').parent().css('height', '200px')} else {$(this).text('⼩').parent().css('height', '2000px')}})</script>5.总结1.有时间还是要了解下html的进化历史。

react-iframe 循环渲染页面-概述说明以及解释

react-iframe 循环渲染页面-概述说明以及解释1.引言1.1 概述随着互联网技术的不断发展，越来越多的网站需要在页面中展示外部网页内容。

而在React开发中，我们常常会遇到需要在页面中嵌入其他网页的需求。

而iframe就是一种常用的实现方式。

iframe是HTML中的一个元素，可以在页面中嵌入另一个HTML页面，实现页面嵌套显示的效果。

在本文中，我们将重点介绍如何在React中使用iframe组件，并结合react-iframe库实现循环渲染页面的功能。

我们将详细探讨iframe组件的优缺点、循环渲染页面的定义和实现步骤，以及使用场景和注意事项。

通过本文的学习，读者将能够更加灵活地在React项目中展示外部网页内容，提升页面的功能和用户体验。

1.2 文章结构本文主要分为引言、正文和结论三个部分。

在引言部分，将对本文的研究对象进行概述，介绍文章的结构和目的，为读者提供一个整体的了解。

在正文部分，将详细介绍React中的iframe组件，包括iframe组件的定义、在React中的应用方式以及其优缺点。

接着，将重点讨论如何在React中循环渲染页面，包括循环渲染页面的定义、利用react-iframe实现循环渲染的步骤和示例代码演示。

最后，将探讨使用场景和注意事项，包括适用的场景、需要注意的问题和总结。

在结论部分，将对整篇文章进行总结，展望未来可能的研究方向，并用简洁的结语结束整篇文章。

1.3 目的本文的主要目的是介绍如何在React中使用react-iframe组件来实现循环渲染页面的功能。

通过详细讲解iframe组件的使用方法以及循环渲染页面的步骤，读者将能够清晰地了解在React应用中如何实现多个页面的动态展示。

同时，本文还将探讨使用react-iframe进行页面循环渲染的适用场景和需要注意的问题，以帮助读者在实际开发中更好地运用这一技术。

通过本文的学习，读者将能够掌握如何利用react-iframe组件实现页面的动态展示，提高开发效率和用户体验。

让frame的高度及大小随帧内容的大小而自动改变呢？

让frame的高度及大小随帧内容的大小而自动改变呢？首先，在frameset页面中的frames添加 id="frameid"然后采用：window.parent.document.getElementById("frameid").rows= "190,90";改变他的上下高度当然如果是cols则把rows改为cols即可。

====================================== =============================让Iframe的高度及大小随帧内容的大小而自动改变呢？一直以来，网上很多朋友都在提问这个问题。

本人在参阅JS文档后，发现在这种效果是可以实现的。

其实实现方法很简单：假设Parent.Asp 包含有一个名为News 的Iframe.Asp，那么在Parent.asp我们如下设置<table border=1><tr><td id=iHeight><iframe name="news" width=100% height=100% src="Iframe.Asp" frameborder=no scrolling=no ></iframe> </td></tr></table>在Iframe.Asp里<body>写入如下代码：<bodyonload="parent.document.all.iHeight.height=this.document.bo dy.scrollHeight+10;">通过以上即可达到Iframe的高度及大小随帧内容的大小而自动改变的效果，而不会影响你原来页面效果，非常方便！。

iframe高度宽度自适应（转）

iframe⾼度宽度⾃适应（转）跨⼦域的iframe⾼度⾃适应完全跨域的iframe⾼度⾃适应的我们可以轻松的做到1. ⽗页⾯通过iframe的contentDocument或document属性访问到⽂档对象，进⽽可以取得页⾯的⾼度，通过此⾼度值赋值给iframe tag。

2. ⼦页⾯可以通过parent访问到⽗页⾯⾥引⼊的iframe tag，进⽽设置其⾼度。

但跨域的情况则不允许对⼦页⾯或⽗页⾯的⽂档进⾏访问（返回undefined），所以我们要做的就是打通或间接打通这个壁垒。

⼀、跨⼦域的iframe⾼度⾃适应⽐如 '/3.html' 嵌⼊了 '/4.html'，这种跨⼦域的页⾯3.html12 3 4 5 6 7 8 9 10 11 12 13<!DOCTYPE html><html><head><meta charset='utf-8'/><title>1.html</title><script type="text/javascript">document.domain = ''</script></head><body><iframe id="ifr"src="/4.html"frameborder="0"width="100%"></iframe> </body></html>4.html 12 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28<!DOCTYPE html><html><head><meta charset="utf-8"><title>2.html</title><script type="text/javascript">document.domain = ''</script></head><body><p>这是⼀个ifrmae，嵌⼊在3.html⾥ </p><p>根据⾃⾝内容调整⾼度</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><script>// 计算页⾯的实际⾼度，iframe⾃适应会⽤到function calcPageHeight(doc) {var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight) var sHeight = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight) var height = Math.max(cHeight, sHeight)return height}window.onload = function() {var height = calcPageHeight(document)parent.document.getElementById('ifr').style.height = height + 'px'}</script></body></html>可以看到与对⽐，只要在两个页⾯⾥都加上document.domain就可以了⼆、完全跨域的iframe⾼度⾃适应分别有以下资源页⾯ A：页⾯ B：页⾯ C：D.js：这四个资源有如下关系1. A⾥嵌⼊C，A和C是不同域的，即跨域iframe2. C⾥嵌⼊B，C和B是不同域的，但A和B是同域的3. C⾥嵌⼊D.js，D.js放在和A同域的项⽬⾥通过⼀个间接⽅式实现，即通过⼀个隐藏的B.html来实现⾼度⾃适应。

让iframe自适应高度-真正解决

让iframe⾃适应⾼度-真正解决需求：实现 iframe 的⾃适应⾼度，能够随着页⾯的长度⾃动的适应以免除页⾯和 iframe 同时出现滚动条的现象。

（需要只有iframe出现滚动条）本⼈⼀开始这么写：会造成只有主页⾯加载是设定⼀次。

但是窗体变⼩或变⼤后不会触发。

$(function setIframeHeight() {var iframe ;//⾼度初始化600，为了14⼨笔记本iframe =document.getElementById('mainiframe');iframe.height=document.getElementById("sidebar").offsetHeight-56;// if (iframe) {// var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;// if (iframeWin.document.body) {// iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;// }// }})今天有朋友问到我关于“iframe⾃适应⾼度”的问题，原本以为是很简单的问题，没想到折腾了20分钟才搞定。

期间遇到⼏个问题，要么是⾼度⾃适应了，但是当窗⼝改变时会出现滚动条。

也就是当窗⼝放⼤时iframe没有⾃动跟随变⼤显得很⼩，或是当窗⼝缩⼩时iframe还是之前那么⼤就出现了滚动条。

还有或是⾼度不准确，那么就达不到想要的效果了。

为什么需要使⽤iframe⾃适应⾼度呢？其实就是为了美观，要不然iframe和窗⼝长短⼤⼩不⼀，看起来总是不那么舒服，特别是对于我们这些编程的来说，如鲠在喉的感觉。

iframe高度自适应的6个方法

iframe高度自适应的6个方法总所周知，IFrame的高度很容易被改变，以便满足其所需的文档大小。

在默认情况下，某些浏览器会在IFrame中自动设置高度，以适应内容的大小。

但是，一旦IFrame的内容发生变化，它的高度还是不会随着变化。

为了解决这个问题，我们可以使用以下6种不同的方法来让IFrame自动调整自身的高度：（1）使用CSSCSS是最简单有效的方法，可以用来让IFrame高度自动调整。

我们可以使用CSS的“height: auto !important”属性，只需给IFrame 添加一个包含此CSS规则的样式，就可以让IFrame在文档大小发生变化时随之调整自身的高度。

（2）使用JavaScript与CSS不同，JavaScript可以精确地获取iframe的内容，并将其高度设置为文档的高度。

只需使用JavaScript的offsetHeight属性，就可以计算出文档的高度，并将其设置为IFrame的高度。

（3）使用jQueryjQuery也是一种强大的JavaScript库，可以用来设置IFrame 的自动高度。

只需使用jQuery的resize()方法，然后使用height()和width()方法获取文档的高度和宽度，再将其分别设置为IFrame 的高度和宽度，就可以轻松地使IFrame自动调整自身的高度。

（4）使用AngularJSAngularJS是一种前端开发框架，可以用来让IFrame的高度自动调整。

在AngularJS中，我们可以使用ng-style指令来定义IFrame 的高度，并使用“height: auto !important”属性，以便在文档大小发生变化时自动调整IFrame的高度。

（5）使用ReactReact也是一种前端开发框架，可以用来让IFrame的高度自动调整。

只需使用React的onResize()方法，获取IFrame实例，然后使用getBoundingClientRect()方法获取其当前的高度，再将其设置为IFrame的高度，就可以让IFrame自动调整自身的高度。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

文章标题：深入探讨React中计算iframe高度的实现方法
随着前端技术的不断发展，React作为一种流行的JavaScript库，已经被广泛应用于各种Web应用程序中。

在React应用程序中，经常会使用iframe来嵌入其他网页或内容，但是如何动态计算iframe的高度成为了一个常见的问题。

本文将从简单到复杂，由浅入深地探讨在React中计算iframe高度的实现方法，帮助读者更深入地理解这一问题。

一、初识iframe
在进行计算iframe高度之前，我们首先需要了解iframe的基本概念和用法。

iframe是HTML中的一个标签，可以在一个网页中嵌入另一个网页。

通常情况下，我们会通过设置iframe的宽度和高度来控制其显示的大小。

然而，当被嵌入的内容高度发生变化时，就需要动态计算iframe的高度来保证内容完全显示。

二、简单的固定高度方法
最简单的方法是直接设置iframe的固定高度，例如：
```html
<iframe src="" height="500px"></iframe>
```
这种方法虽然简单，但是显然不适用于嵌入的内容高度可能变化的情况。

我们需要寻找一种动态计算iframe高度的解决方案。

三、使用window.postMessage通信
在React中，我们可以利用window.postMessage方法来实现iframe和父页面之间的通信。

具体做法是，在被嵌入的页面中发送消息，并在父页面中监听消息并调整iframe的高度。

这种方法需要在iframe中嵌入的页面和父页面中分别编写相应的代码，实现消息的发
送和接收，从而动态计算iframe的高度。

四、利用React的生命周期方法
在React中，我们可以利用组件的生命周期方法来实现动态计算iframe高度。

具体做法是在组件加载完成后获取嵌入内容的高度，并
将其应用到iframe上。

可以通过监听内容高度的变化来及时调整iframe的高度。

这种方法可以保证在React组件中实现动态计算iframe高度，同时也能保证性能和可维护性。

五、综合考虑和个人观点
针对React中计算iframe高度的实现方法，我们可以根据具体情况选择合适的解决方案。

从简单的固定高度到利用postMessage通信，再到利用React生命周期方法，每种方法都有其适用的场景和优缺点。

我个人认为，在React应用中，可以优先考虑利用React的生命周期
方法来实现动态计算iframe高度，这样可以更好地结合React的特性，并且有利于代码的维护和扩展。

六、总结与回顾
动态计算iframe高度在React中是一个常见且有挑战性的问题。

通过本文的探讨，我们了解了如何在React中实现动态计算iframe高度的方法，分别从简单到复杂、由浅入深地对这一问题进行了全面评估。

通过学习和实践，我们可以更深入地理解和应用这些方法，从而更好
地满足实际的开发需求。

七、其他相关内容
除了在React中计算iframe高度，还有一些其他相关的内容也值得探讨，例如在不同浏览器环境下的兼容性、多层嵌套iframe的处理方法等。

这些内容可以作为进一步深入学习的方向，帮助我们更全面、深
入地理解和应用iframe相关的知识。

通过本文的阐述，相信读者对于在React中计算iframe高度的实现方法有了更深入的理解。

希望本文能够帮助读者更好地应对类似的问题，并且激发更多的思考和探索。

让我们共同享受前端技术发展带来的乐
趣和挑战吧！
以上是本文的探讨和个人观点，请多指教。

八、跨域通信和安全性考
虑
在使用postMessage方法进行iframe和父页面之间的通信时，需要考虑跨域通信和安全性的问题。

跨域通信是指在不同域名、不同协议、不同端口的页面之间进行消息传递，这可能会带来安全风险。

为了确
保通信的安全性，需要在发送消息时对消息源进行验证，并且在接收
消息时对消息内容进行严格检查。

另外，还可以通过设置X-Frame-Options等HTTP头来限制iframe的使用，进一步加强安全防护。

九、异步加载内容的处理方法
在实际应用中，有些情况下嵌入的内容是通过异步加载获取的，这就
带来了动态计算iframe高度的新挑战。

为了解决这个问题，可以通过监听内容加载完成的事件，并在内容加载完成后重新计算iframe的高度。

这需要在React组件中编写对应的逻辑，以应对异步加载内容带
来的影响，并保证iframe能够正确显示。

十、移动端适配和响应式设计
随着移动互联网的发展，移动端的适配和响应式设计也成为了前端开
发中的重要课题。

对于计算iframe高度而言，需要考虑不同移动设备的屏幕尺寸和显示效果，以确保在移动端能够正确显示iframe内容。

这需要综合考虑CSS的媒体查询、Viewport设置等移动端适配技术，从而实现在不同设备上的良好显示效果。

十一、维护和优化
随着项目的不断发展和迭代，可能会出现对计算iframe高度逻辑的维护和优化需求。

随着页面结构的调整可能需要修改计算高度的逻辑，
或者针对性能优化需要对计算方法进行调整。

在实际应用中，需要不
断对计算iframe高度的逻辑进行维护和优化，以确保其稳定性和可靠
性。

十二、总结与展望
通过本文的深入探讨，我们对于在React中计算iframe高度的实现方法有了更全面的了解。

从简单的固定高度到复杂的跨域通信和移动端
适配，我们可以根据实际需求选择合适的解决方案，同时也可以在实
践中不断优化和扩展这些方法。

未来，随着前端技术的不断发展，我
们也可以期待更多新的解决方案和工具的出现，帮助我们更好地应对
计算iframe高度这样的问题。

在日益复杂和多样化的前端开发领域中，我们需要不断学习和探索，
以不断提升自己的技术水平和解决问题的能力。

希望本文能够帮助读
者更深入地理解和应用计算iframe高度的技术，也希望读者能够通过实践和思考，不断拓展自己的前端知识体系，成为优秀的前端工程师。

十三、感谢阅读
感谢各位读者的耐心阅读和倾听。

希望本文能够对于你有所帮助，在
实际开发中能够应用到所学知识，并且不断提升自己的技术能力。

如
果有任何问题或者建议，欢迎在评论区留言，我们一起探讨，共同进步。

谢谢！。