jquery 控制iframe高度自适应

最新推荐文章于 2023-05-26 11:28:04 发布
最新推荐文章于 2023-05-26 11:28:04 发布
阅读量7.4k 收藏 3
点赞数
分类专栏： html5&css3.0 文章标签： iframe jquery stylesheet 文档 html 测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lenjent/article/details/7612265
版权
jquery 控制iframe高度自适应

在做项目的过程中需要使用iframe，但是iframe默认有一个高度，超过该默认高度的会内容会被隐藏起来，而小于该默认高度的内容呢又会把默认高度当成内容的高度，在经过寻找答案的过程中，找到了怎样去控制iframe高度自适应

1,主窗口main.html

<html>
<head>
</head>
<body>
 <iframe id='iframe' src='iframe.html' οnlοad="this.height=this.contentWindow.document.body.scrollHeight">
 </iframe>
</body>
</html>
以上代码的意思是：在iframe子窗体中文档加载完了之后，自身iframe高度=文档高度，contentWindow指定可以在子窗体中获取文档内容

2，子窗体iframe.html

<html>
<head>
  <link rel='stylesheet' type='text/css' href='../css/iframe.css'/>         <!--iframe中html的样式文件-->
  <script src='../js/jquery-1.3.2.min.js' type='text/javascript'></script>  <!--加载jquery-->
  
			
</head>
<body>
</html>

<script type='text/javascript'>	
        $(parent.document).find('iframe').height($(document).height());    //获取iframe子窗体的文档高度，并将此高度设置为父窗体中<iframe>元素的高度
 
 </script>









这样就可以在iframe.html 中控制自身的高度了







以上代码是在做项目的过程中截取的部分代码，没有经过测试，但是大概思路就是这样














                

        

        

    




    

      

        

            

              
                
                  lenjent
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          










                



	

		

			

				
					
jQuery解决iframe高度自适应代码

				
			

			

				

					10-29
				

			

		

		

			
				
网上查了好多用着都不行，自己搞定了：在包含iframe的页面中加入以下脚本，基本思想是在iframe加载内容后重新设置高度，下面代码尽在IE6中用过，没在其他浏览器中测试。

			
		

	



                

              
                



	

		

			

				
					
教你用jquery实现iframe自适应高度

				
			

			

				

					01-19
				

			

		

		

			
				
jquery代码一：  代码如下://注意：下面的代码是放在test.html调用 $(window.parent.document).find(“#main”).load(function(){ var main = $(window.parent.document).find(“#main”); var thisheight = $...

			
		

	



                


  
              

                


	

		

			

				
					
关于Iframe嵌入页面，获取内部页面高度的办法

				
			

			

				

					m0_46750297的博客
				

				

					03-18
					
					1万+
					
				

			

		

		

			
				
项目中经常会嵌入别人的页面，如果不知道被嵌入页面的高度，就没法给Iframe高度赋值，内部嵌入的页面就会出现滚动条，影响页面的美观。

1、如果被嵌入页面和当前页面不跨域，可以使用Iframe的@load加载事件获取内部高度


 <iframe   name="outerPage"  @load="iframeload()" :src="url" ref="iframe"  scrolling="auto" frameborder="0" id="outerPage" :style="{ 'min-

			
		

	





	

		

			

				
					
开发小技巧：jQuery处理自适应内容高度的iframe

				
			

			

				

					思考者的LAMP技术博客
				

				

					03-28
					
					939
					
				

			

		

		

			
				
前端开发中，我们往往需要处理iframe，可能有的时候希望iframe根据内容自适应高度以便不出现令人烦心的滚动条，下面这段代码可以帮助你实现类似功能。


$(document).ready(function()
        {
                // Set specific variable to represent all iframe tags.

			
		

	



		

			
		



	

		

			

				
					
jQuery js iframe 自适应高度

				
			

			

				

					の原為じ簡單
				

				

					07-23
					
					122
					
				

			

		

		

			
				
方法一、jQuery
 
  &lt;script type="text/javascript"&gt;  
&lt;!--  
$(function(){  
    $("#workArea").load(function(){       
        var height = $(this).contents().find("#box").height() + 40;  
...

			
		

	





	

		

			

				
					
jquery 操作iframe的几种方法总结选择器

				
			

			

				

					qq_32722591的博客
				

				

					05-26
					
					3941
					
				

			

		

		

			
				
("#mainframe",parent.document.body).contents().find("someID").html()或者 $("#mainframe",parent.document.body).contents().find("someID").val()一个页面中的所有框架以集合的形式作为window 对象的属性提供，例如：window.frames就表示该页面内所有框架的集合，这和表单对象、链接对象、图片对象等是类似的，不同的是，这些集合是 document的属性。

			
		

	





	

		

			

				
					
jquery ajax应用中iframe自适应高度问题解决方法

				
			

			

				

					10-26
				

			

		

		

			
				
很多管理系统中，都使用iframe进行信息内容的展示方式，或者作为主菜单的链接展示内容。使用iframe的问题就是自适应高度的问题

			
		

	





	

		

			

				
					
jQuery简单实现iframe的高度根据页面内容自适应的方法(转)

				
			

			

				

					
				

				

					12-01
					
					128
					
				

			

		

		

			
				
本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法。分享给大家供大家参考，具体如下：

方式1：
 
//注意：下面的代码是放在和iframe同一个页面中调用
$("#iframeId").load(function () {
    var mainheight = $(this).contents().find("body").height(...

			
		

	





	

		

			

				
					
jquery 动态设置iframe的高度

				
			

			

				

					zwxiaole的专栏
				

				

					12-29
					
					2455
					
				

			

		

		

			
				

页面代码
&lt;!--编辑表单开始--&gt;
        &lt;div region="center" bodyCls="box" id="bddiv"&gt;
         &lt;iframe id="ckframe" name="ckframe" frameborder="no" style="border:n

			
		

	





	

		

			

				
					
jQuery获取与设置iframe高度的方法

				
			

			

				

					10-21
				

			

		

		

			
				
主要介绍了jQuery获取与设置iframe高度的方法,涉及jQuery针对iframe元素的获取与设置相关操作技巧,非常简单实用,需要的朋友可以参考下

			
		

	





	

		

			

				
					
jQuery设置iframe的高度

				
			

			

				

					Quber
				

				

					01-23
					
					1144
					
				

			

		

		

			
				
设置iframe的高度，iframe的高度由iframe中的页面高度决定。  1.首先获取到iframe中页面的高度：   variframeHeight = $("#UpdateUserItem").contents().find("body").height();  2.设置iframe的高度：   $("#UpdateUserItem").height(iframeHeight...

			
		

	





	

		

			

				
					
JQuery自动设置IFrame的宽和高

				
			

			

				

					纪敏强的博客
				

				

					11-05
					
					956
					
				

			

		

		

			
				

1、JavaScript代码如下：
 
function autoFrameSize(iframe) {
	var _width=$("#"+iframe).contents().find("body")[0].scrollWidth;
	var _height=$("#"+iframe).contents().find("body")[0].offsetHeight;
	$("#"+...

			
		

	





	

		

			

				
					
6种iframe高度自适应的方法

				
			

			

				

					web前端开发
				

				

					03-12
					
					3万+
					
				

			

		

		

			
				
js自适应高度，实际上就是设置iframe的高度，设置等于内嵌网页的高度，从而看不到滚动条和嵌套痕迹。对于用户体验和网站美观起着重要作用。我们可以通过css来给它直接定义一个高度，同样可以...

			
		

	





	

		

			

				
					
jQuery解决iframe高度随内容自动调整

				
			

			

				

					zhuwang219的博客
				

				

					01-04
					
					2835
					
				

			

		

		

			
				
$(function(){
//iframe高度随内容自动调整  
$('.main').load(
	function(){
		var h = $(this).contents().find("body").height();	//别的参考不对
		$(this).height(h);
	}  
);  
});


index：

top


iframe：
page1




			
		

	





	

		

			

				
					
调整iframe  父页面的高度

				
			

			

				

					猎人在吃肉
				

				

					06-04
					
					923
					
				

			

		

		

			
				
 
调整iframe  父页面的高度
 
 
 
$(function(){
	//设置默认高度
	var height_default = 250;	
	
	//父页面iframe的id
	var ifrmae_id="ifrmae_1";
	
	//获取子页面实际需要的高度
	var _height=document.body.scrollHeight;

	//...

			
		

	





	

		

			

				
					
js实现自适应浏览器的高度和宽度

				
			

			

				

					☆╮123☆
				

				

					12-16
					
					1293
					
				

			

		

		

			
				
超级简单的方法，也不用写什么判断浏览器高度、宽度啥的。
下面的两种方法自选其一就行了。一个是放在和iframe同页面的，一个是放在test.html页面的。
注意别放错地方了哦。

iframe代码，注意要写ID


jquery代码１：
//注意：下面的代码是放在test.html调用
$(window.parent.document).find("#main").load(f

			
		

	





	

		

			

				
					
iframe自适应高度

				
			

			

				

					zhu_menglu的博客
				

				

					04-12
					
					4684
					
				

			

		

		

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

			
		

	





	

		

			

				
					
真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变

					
热门推荐

				
			

			

				

					巴黎的妖
				

				

					05-19
					
					21万+
					
				

			

		

		

			
				
今天有朋友问到我关于“iframe自适应高度”的问题，原本以为是很简单的问题，没想到折腾了20分钟才搞定。期间遇到几个问题，要么是高度自适应了，但是当窗口改变时会出现滚动条。也就是当窗口放大时iframe没有自动跟随变大显得很小，或是当窗口缩小时iframe还是之前那么大就出现了滚动条。还有或是高度不准确，那么就达不到想要的效果了。



为什么需要使用iframe自适应高度呢？其实就是为

			
		

	





	

		

			

				
					
jquery实现iframe自适应高度

				
			

			

				

					tingwufeixiang的博客
				

				

					01-17
					
					884
					
				

			

		

		

			
				
1、iframe自适应页面高度
      首先需要给iframe设置一个id，不需要滚动条则加上scrolling="no"
      然后加上一个onload事件function iFrameHeight(iframe) {   
	var ifm= document.getElementById(iframe.id);   
	var subWeb = document.frames 

			
		

	





	

		

			

				
					
jQuery Grid 让高度 自适应

					
最新发布

				
			

			

				

					06-09
				

			

		

		

			
				
让 jQuery Grid 的高度自适应需要进行如下配置：  1. 将 `height` 属性设置为 `'auto'`；  2. 将 `shrinkToFit` 属性设置为 `true`。  具体代码如下：  ```javascript $(gridSelector).jqGrid({  url: '...',  ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值