iframe 自适应高度[ff,ie下大同小异]

最新推荐文章于 2024-08-22 14:32:34 发布
最新推荐文章于 2024-08-22 14:32:34 发布
阅读量77 收藏
点赞数
分类专栏： Web前端 文章标签： javascript xhtml ViewUI 
 

 法一：
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>iframe 自适应高度[ff,ie下大同小异]</title> <script language="javascript" type="text/javascript"> function dyniframesize(down) { var pTar = null; if (document.getElementById) { pTar = document.getElementById(down); } else { eval('pTar = ' + down + ';'); } if (pTar && !window.opera) { //begin resizing iframe pTar.style.display = "block" if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight) { //ns6 syntax pTar.height = pTar.contentDocument.body.offsetHeight + 20; pTar.width = pTar.contentDocument.body.scrollWidth + 20; } else if (pTar.Document && pTar.Document.body.scrollHeight) { //ie5+ syntax pTar.height = pTar.Document.body.scrollHeight; pTar.width = pTar.Document.body.scrollWidth; } } } </script> </head> <body> <!-- 头部iframe --> <div style="width: 100%; border: 0px solid #3C72B0; background-image: url(../images/head_bg.png); background-repeat: repeat-x;"> <iframe src="top.html" width="100%"></iframe> </div> <!-- 中间左右侧iframe --> <div style="border: #000000 0px solid; float: left; width: 100%;"> <div style="float: left; width: 20%;"> <iframe src="left.html" scrolling="no" height="100%" id="ifm0" name="ifm0" οnlοad="javascript:dyniframesize('ifm0');" width="100%"></iframe> </div> <div style="float: left; width: 80%;"> <iframe src="right.html" scrolling="no" id="ifm" name="ifm" οnlοad="javascript:dyniframesize('ifm');" width="100%"></iframe> </div> </div> <!-- 尾部iframe --> <div style="height: 120px; width: 100%; background-color: #FF0000; float: left"> <iframe src="bottom.html" width="100%"></iframe> </div> </body> </html> 

 

                

        

        




    




    

      

        

            

              
                
                  iteye_10251
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
iframe高度自适应解决方式

				
			

			

				

					lavendersue的博客
				

				

					11-26
					
					1441
					
				

			

		

		

			
				
带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是 iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给iframe设置高度的时候多了也不好，少了更是不行，现在，让我来告诉大 家几种iframe动态调整高度的方法。
1、

<iframe width="778" align="center" height="200" id=...

			
		

	



                

              
                



	

		

			

				
					
html iframe自动高度,真正解决iframe高度自适应问题

				
			

			

				

					weixin_33826994的博客
				

				

					06-02
					
					3966
					
				

			

		

		

			
				
1.前言解决iframe高度自适应问题有两种方法1.pym2.手动设置iframe的高度本文主要是总结第二种实现方式，因为第一种pym.js插件我没用懂如果使用iframe时，遇到以下的需求：iframe的高度始终等于嵌入页面内容的高度，而不是屏幕的高度右侧不允许出现两个滚动条iframe的高度自适应不仅仅是指刚加载进来时，也有可能嵌入内容的高度会随点击变化(如：下拉菜单，左侧导航栏等)页面可能同...

			
		

	



                


  
              

                


	

		

			

				
					
iframe自适应高度

				
			

			

				

					zhu_menglu的博客
				

				

					04-12
					
					4777
					
				

			

		

		

			
				
其中，padding-bottom的值需要根据iframe的宽高比来计算，例如，如果iframe的宽高比为16:9，则padding-bottom的值为56.25%（9除以16乘以100%）。可以设置iframe标签的高度为0，然后使用padding-bottom属性来设置iframe标签的高度，使其按照原来的比例自适应。这样，当浏览器窗口大小改变时，iframe标签的高度会自动按照原来的比例进行调整，从而实现自适应效果。

			
		

	





	

		

			

				
					
layui tab iframe 自适应高度

				
			

			

				

					qq_1521514763的博客
				

				

					04-23
					
					4141
					
				

			

		

		

			
				
<iframe class="myiframe"  data-frameid="'+id+'" scrolling="no" frameborder="0" src="'+url+'" height="100%" style="width:100%;" ></iframe>
 	FrameWH();
   function FrameWH() {
   //获取body高度...

			
		

	



		

			
		



	

		

			

				
					
jquery iframe自适应高度

				
			

			

				

					m0_72495985的博客
				

				

					11-04
					
					577
					
				

			

		

		

			
				
注：iframe_title为导航栏，是一个jsp页面，上面的按钮利用超链中的target属性指定到iframe中（例：target="iframe_content"）按动按钮会在iframe_content显示相应的页面，如果没有这个js处理并且下面的页面高度大于当前浏览器窗口的高度时，就会出现两条滚动条。

			
		

	





	

		

			

				
					
动态获取并设置 iframe 自适应高度

				
			

			

				

					张兴华的博客
				

				

					08-31
					
					2355
					
				

			

		

		

			
				
实际需求：页面中有一些固定元素 + 内嵌 iframe 页面，此时如果给 iframe 设置固定高度会导致 iframe 内部滚动，体验不佳。于是需要动态获取 iframe 实际高度并设置，但有些 iframe 页面会有占位 loading or 骨架屏等，导致一开始就获取高度会不准。所以给出解决方案如下：...

			
		

	





	

		

			

				
					
h5 iframe 自适应高度

				
			

			

				

					mtl1994的博客
				

				

					01-05
					
					2989
					
				

			

		

		

			
				
h5 iframe 自适应高度

外部div：div position: relative; width: 100%; padding-top: calc(100% * 720 / 1280); border: 2px black solid;
内部iframe：position: absolute; width: 100%; height: 100%; top: 0;
<div style="position: relative; width: 100%; 
    padding-top: cal

			
		

	





	

		

			

				
					
iframe自适应高度，多层嵌套iframe自适应高度的解决方法

				
			

			

				

					程序猿开发日志【学习永无止境】
				

				

					12-05
					
					5067
					
				

			

		

		

			
				
在页面无刷新更新方面，虽然现在的ajax很强悍，但是处理代码相对多点。想比之下，iframe就简单多了！处理iframe的自适应宽、高，会经常用到，网上整理了一份，写在这里备用：

单个iframe 高度自适应：



起作用的是这句：onload="this.height=iFrame1.document.body.scrollHeight"

多层嵌套iframe 高度自适应：

			
		

	





	

		

			

				
					
iframe高度自适应兼容IE

				
			

			

				

					weixin_41571062的博客
				

				

					09-13
					
					262
					
				

			

		

		

			
				
在JS中先获取iframe元素,然后通过获取到的实例获取对应iframe页面的高度

			
		

	





	

		

			

				
					
layui中iframe自适应高度

				
			

			

				

					艾小逗
				

				

					04-04
					
					5859
					
				

			

		

		

			
				
layui中iframe自适应页面高度
// 窗口自适应    
	$(window).on('resize', function() {
		AdminInit();
		// iframe窗口自适应
		var $content = $('#nav_xbs_tab .layui-tab-content');
		$content.height($(this).height() - 125);
...

			
		

	





	

		

			

				
					
JavaScript 处理Iframe自适应高度(同或不同域名下)

				
			

			

				

					10-27
				

			

		

		

			
				
Iframe的自适应高度问题分为同域名下的自适应和跨域自适应两种情况。  首先，我们来探讨同域名下的Iframe自适应高度的处理方法。当Iframe及其所嵌入页面位于同一域名时，可以通过JavaScript来获取嵌入页面的实际高度...

			
		

	





	

		

			

				
					
Iframe自适应高度兼容ie,firefox多浏览器

				
			

			

				

					10-30
				

			

		

		

			
				
本文讲解的是关于Iframe元素在网页中如何实现自适应高度，并确保在不同的浏览器环境下能够正常工作，特别是针对Internet Explorer（IE）和Firefox浏览器的兼容性问题。接下来将详细探讨实现Iframe自适应高度的方法...

			
		

	





	

		

			

				
					
iframe 自适应高度[在IE6 IE7 FF下测试通过]

				
			

			

				

					09-06
				

			

		

		

			
				
本文将详细介绍两种在IE6、IE7及Firefox下实现`<iframe>`自适应高度的方法。  ### 方法一：JavaScript 调整高度  此方法主要通过JavaScript来动态获取`<iframe>`中内容的实际高度，并设置`<iframe>`的高度以实现...

			
		

	





	

		

			

				
					
js实现iframe自动自适应高度的方法

				
			

			

				

					10-24
				

			

		

		

			
				
本篇文章将详细介绍如何使用JavaScript实现Iframe的自动自适应高度。  首先，理解基本概念。Iframe的`height`属性决定了其显示区域的高度，当我们想要Iframe内容自适应时，我们需要动态地修改这个属性值，使其等于...

			
		

	





	

		

			

				
					
nodejs安装

				
			

			

				

					a1241436267的博客
				

				

					08-19
					
					420
					
				

			

		

		

			
				
版本控制nodejs版本:v17.3.1npm版本:8.3.0安装流程。

			
		

	





	

		

			

				
					
vue开发引入第三方插件的方式及其区别

					
最新发布

				
			

			

				

					你们瞎搞
				

				

					08-22
					
					333
					
				

			

		

		

			
				
npm。

			
		

	





	

		

			

				
					
【js】各类前端输入校验方法

				
			

			

				

					galaxyJING的博客
				

				

					08-21
					
					346
					
				

			

		

		

			
				
【代码】【js】各类前端输入校验方法。

			
		

	





	

		

			

				
					
Nuxt3【内置的工具函数】2024最新版

				
			

			

				

					朝阳39的博客
				

				

					08-20
					
					996
					
				

			

		

		

			
				
用于在Vue应用程序或API路由中进行HTTP请求，详见。

			
		

	





	

		

			

				
					
React学习笔记，从入门到砸门

				
			

			

				

					留白声的博客
				

				

					08-20
					
					1036
					
				

			

		

		

			
				
react详细自我学习笔记，内容包括JSX、Redux、Router等

			
		

	





	

		

			

				
					
iframe 自适应高度

				
			

			

				

					08-11
				

			

		

		

			
				
对于 iframe 的自适应高度，你可以使用以下方法：  1. 使用 JavaScript 动态调整 iframe 的高度：在父页面中，通过 JavaScript 获取 iframe 的内容高度，然后将这个高度应用到 iframe 的样式中。你可以使用以下代码...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值