iframe 根据内容自适应高度-终极解决方案

调整iframe高度的两种方法
最新推荐文章于 2025-07-10 16:09:19 发布
原创 最新推荐文章于 2025-07-10 16:09:19 发布 · 6.1w 阅读 · 45 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了两种在网页中自动调整iframe元素高度的方法。第一种方法是在子页面加载完毕时通过父页面脚本进行调整；第二种方法则是在主页面中利用iframe的onLoad事件来实现高度的自动匹配。

第一中方法：

在子页面加载完毕的时候执行

parent.document.getElementById("iframe").height=0;

parent.document.getElementById("iframe").height=document.body.scrollHeight;


第二中方法：

在主页面 iframe onLoad 时间里面写

function iframeLoad()
{
    document.getElementById("iframe").height=0;
    document.getElementById("iframe").height=document.getElementById("iframe").contentWindow.document.body.scrollHeight;
}




推荐第二种




                

        

    

    
  



    



                



	

		

			

				
					
iframe根据页面内容自适应高度和宽度

				
			

			

				

					09-03
				

			

		

		

			
				
iframe根据引用的页面内容自适应高度和宽度，直接查看例子，简单易操作

			
		

	



                

            
              



	

		

			

				
					
iframe内容高度 iframe自适应高度终极解决Iframe设置高度后无法缩小问题

				
			

			

				

					06-03
				

			

		

		

			
				
针对`<iframe>`内容高度自适应，上述经典代码提供了一个解决方案。这段JavaScript函数`setIFrameHeight(iframe)`通过获取`<iframe>`内的内容文档（`contentDocument`），然后比较`body`和`documentElement`（HTML根...

			
		

	



              


  
              

                


	

		

			

				
					
iframe框根据内容自适应高度

				
			

			

				

					weixin_33728708的博客
				

				

					01-21
					
					224
					
				

			

		

		

			
				
1.页面

<iframe name="iframe_userCenter" id="iframe"  frameborder=2
         width=100% height=100% marginheight=0 marginwidth=0
         scrolling=no src="user_userMessage">

</iframe...

			
		

	





	

		

			

				
					
实现iframe自适应高度的三种简易方法

					
最新发布

				
			

			

				

					weixin_34268462的博客
				

				

					07-10
					
					406
					
				

			

		

		

			
				
同源策略是浏览器的一种安全机制，它阻止了Web页面对不同源的文档或脚本进行脚本访问。两个页面具有相同的协议（scheme）、主机（host）、端口（port）被认为是同源的。如果两个页面具有不同的源，则它们之间的一些交互就会受到限制。

			
		

	



		

			
		



	

		

			

				
					
iframe自适应高度（随内容高度变化）

				
			

			

				

					weixin_50641294的博客
				

				

					05-25
					
					6498
					
				

			

		

		

			
				
由于需求需要把一个项目的页面嵌套到另外一个页面，但是iframe高度不能写死，所以要让iframe高度自适应
1.解决思路： 获取嵌套页面的高度，把高度赋值给父页面的iframe
代码实现
1.首先在嵌套页面获取父级ifram元素
let iframeDom = parent.parent.document.getElementById("iframe")
2.获取嵌套页面高度
let box = document.getElementById("box")
3.把页面高度复制给父级ifram
iframe

			
		

	





	

		

			

				
					
iframe 自适应内容高度

				
			

			

				

					weixin_30415801的博客
				

				

					10-14
					
					115
					
				

			

		

		

			
				
在使用iframe的时候，会出现iframe不能随着内容的高度自动改变的情况，下面就介绍一种可以自适应高度的办法。<br/>
 <pre>
　　<iframe id="iframe" name="search_1" src="zhaiyao.html" frameborder="0" scrolling="no" onload="setIframeH...

			
		

	





	

		

			

				
					
iframe根据内容自适应高度

				
			

			

				

					weixin_41674235的博客
				

				

					05-18
					
					421
					
				

			

		

		

			
				
以下方法适用于两个网页同源

如果两个网页不同源，就无法拿到对方的DOM


<iframe id="iframe" width="1200" src="" ></iframe>
<script type="text/javascript">
window.onload = function () {
  document.getElementById("iframe").height=0;
  document.getElementById("iframe").heig

			
		

	





	

		

			

				
					
iFrame高度自适应终极解决方案（兼容IE7,8,9 Firefox3.6+,Chrome 12+）

				
			

			

				

					03-28
				

			

		

		

			
				
"iFrame高度自适应终极解决方案（兼容IE7,8,9 Firefox3.6+,Chrome 12+）"这个标题所指向的，就是一种跨浏览器的策略，确保iFrame内容无论何时更新，都能自动调整其高度，从而避免滚动条的出现和内容溢出。...

			
		

	





	

		

			

				
					
iframe高度自适应解决方案，兼容所有浏览器

				
			

			

				

					
				

			

		

		

			
				
"这篇文章主要介绍了如何使用iframe解决跨域页面高度自适应的问题，提供了一段兼容所有浏览器的终极代码，确保iframe内容加载后不会出现滚动条或者内容显示不全的BUG。"  在Web开发中，iframe（Inline Frame）是一种...

			
		

	





	

		

			

				
					
兼容主流浏览器的iFrame高度自适应方案

				
			

			

				

					
				

			

		

		

			
				
但是，通常，解决iFrame高度自适应的终极解决方案会涉及到以下一些知识点：  1. **跨文档通信（Cross-Document Messaging）**: 通过window.postMessage方法，iFrame和父页面可以安全地进行跨域通信。这对于获取...

			
		

	





	

		

			

				
					
【弹窗策略揭秘】：window.open参数与浏览器兼容性的终极指南

				
			

			

				

					
				

			

		

		

			
				
![【弹窗策略揭秘】：window.open参数与浏览器兼容性的终极...针对浏览器兼容性问题进行了深入分析，探讨了不同浏览器间的差异及其对弹窗策略的影响，并提出了解决方案。文章还讨论了弹窗策略在业务应用中的实践案例

			
		

	





	

		

			

				
					
iframe自动适应高度（完美自适应高度嵌套代码），兼容目前主流浏览器。

				
			

			

				

					08-12
				

			

		

		

			
				
iframe自动适应高度，很难得的资源，很多下载的都是部分浏览器可以用，这个可以兼容360.ie6789等，遨游，火狐。搜狗等浏览器。。亲自测试。

			
		

	





	

		

			

				
					
iframe框根据内容自适应高度(100%可用)

				
			

			

				

					红目香薰
				

				

					12-16
					
					1997
					
				

			

		

		

			
				
iframe框根据内容自适应高度(100%可用)

HTML:


<iframe id="iframe" src="自己写地址" name="content" frameborder="0" style="width: 100%;height: 100vh;"></iframe>

script:


 <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.min.js">&..

			
		

	





	

		

			

				
					
【前端】iframe根据子内容高度进行自适应

				
			

			

				

					loyd3的博客
				

				

					09-08
					
					2569
					
				

			

		

		

			
				
针对多个iframe的情况
iframe标签
<iframe width="100%" height="100%" src="/..."></iframe>

js代码
function iframeLoad() {
            var ifms = document.getElementsByTagName("iframe");  //获取iframe
            for (let index = 0; index < ifms.length; ind

			
		

	





	

		

			

				
					
iframe高度随内容自适应

				
			

			

				

					qq_33172029的博客
				

				

					01-04
					
					868
					
				

			

		

		

			
				
iframe高度随内容自适应

方法：


//计算iframe高度
function calcPageHeight(doc) {
	var cHeight = Math.max(doc.body.clientHeight, doc.documentElement.clientHeight);
	var sHeight = Math.max(doc.body.scrollHeight, doc.d...

			
		

	





	

		

			

				
					
iframe 自适应

				
			

			

				

					牛肉胡辣汤
				

				

					10-09
					
					5610
					
				

			

		

		

			
				
function reinitIframe(){

var iframe = document.getElementById("iframepage");

try{

  var bHeight = iframe.contentWindow.document.body.scrollHeight;

  var dHeight = iframe.contentWindow.

			
		

	





	

		

			

				
					
iframe根据内容自适应高度教程

					
热门推荐

				
			

			

				

					李秀才的博客
				

				

					02-15
					
					1万+
					
				

			

		

		

			
				
博主今天调iframe根据内容自适应高度，发现好多坑。首先呢发现得到全文的高度在各大浏览器里的写法是不一样的，IE和火狐是一种写法，360和谷歌是另一种。所以呢就得根据浏览器的名称用不同的代码；后来用navigator.appName（官方说是得到浏览器的名称，就是个大坑）拿浏览器的名称，结果发现IE的appName是“Microsoft Internet Explorer”，其他浏览器诸如火狐、

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 14

	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值