使用Jquery获得iFrame父页面，动态改变iFrame大小

最新推荐文章于 2018-08-30 15:51:36 发布
原创 最新推荐文章于 2018-08-30 15:51:36 发布 · 455 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery js iframe

本文介绍了一种使用JavaScript来动态调整iframe元素高度的方法。通过增加或减少指定的高度值，可以实现iframe内容区域的平滑扩展或收缩效果。此方法适用于需要响应式布局的网页设计。

 

function addSizeFrame(){
	var $mainFrame = $(window.parent.document).find("#mainFrame");
	var height = $mainFrame.height() + 100;
	$mainFrame.height(height);
}
function reduceSizeFrame(){
	var $mainFrame = $(window.parent.document).find("#mainFrame");
	var height = $mainFrame.height() - 100;
	$mainFrame.height(height);
}
$(window.parent.document).find("#mainFrame");

用来获得父页面，并找到id为mainFrame的结点。
                

        




    

  



    

      

        

            

              
                
                  iteye_1604
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
jquery实现父元素大小改变插件：jquery-resize

				
			

			

				

					05-02
				

			

		

		

			
				
jquery实现父元素大小改变插件：jquery-resize

			
		

	



                

            
              



	

		

			

				
					
Jquery调用iframe父页面中的元素及方法

				
			

			

				

					11-24
				

			

		

		

			
				
在网页开发中，有时我们需要在`iframe`中与父页面进行交互，比如调用父页面中的元素或执行父页面的方法。本文将详细讲解如何使用jQuery实现这一功能。  首先，我们来了解一下`iframe`的基本概念。`iframe`（Inline ...

			
		

	



              


  
              

                


	

		

			

				
					
js 子页面改动后 父页面的iframe的高度随之变化

				
			

			

				

					qq_31407347的博客
				

				

					05-10
					
					2192
					
				

			

		

		

			
				
function IFrameResize(){  
    // alert(this.document.body.scrollHeight); //弹出当前页面的高度  
     var obj = parent.document.getElementById("ID");  //取得父页面IFrame对象  
     //alert(obj.height); //弹出父页面中IFr

			
		

	





	

		

			

				
					
jQuery 计算iframe 窗口大小

				
			

			

				

					li_ser的专栏
				

				

					05-12
					
					1269
					
				

			

		

		

			
				
$(function () {
        var $main = $("#main").height();
        var $searchPanel = $("#searchPanel").height();
        var $listArea = $("#listArea").height();
        $("#aaax").height($(window)

			
		

	



		

			
		



	

		

			

				
					
获取iframe自适应后的宽高

				
			

			

				

					weixin_30888707的博客
				

				

					03-11
					
					552
					
				

			

		

		

			
				
1.同域
一：引入jquery

<script type="text/javascript" src="../jquery.min.js"></script>

二：设置iframe的src

<iframe src="http://localhost/mc/demo3.html" marginwidth="0"  marginheight="0" w...

			
		

	





	

		

			

				
					
Jquery 操作页面中iframe自动跟随窗口大小变化--引用--收藏

				
			

			

				

					h396463735的专栏
				

				

					03-21
					
					906
					
				

			

		

		

			
				
Jquery 操作页面中iframe自动跟随窗口大小变化，而不出现滚动条，只在iframe内部出滚动条




     //调用函数
        var pagestyle = function() {
            var rframe = $("#mainFrame");
            //ie7默认情况下会有上下滚动条，去掉上下15像素

			
		

	





	

		

			

				
					
利用JQuery操作iframe父页面、子页面的元素和方法汇总

				
			

			

				

					10-19
				

			

		

		

			
				
本文将详细介绍如何使用JQuery操作`iframe`以及在父页面和子页面间进行元素和方法的交互。  首先，让我们来看看如何在`iframe`中查找或操作父页面的元素：  1. **在iframe中查找父页面元素**：  ```javascript  $('#...

			
		

	





	

		

			

				
					
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)

				
			

			

				

					01-19
				

			

		

		

			
				
JQUERY IFRAME下面简单使用Jquery来操作iframe的一些...第三、在iframe中调用父页面中定义的方法和变量：parent.methodparent.valueiframe里用jquery获取父页面body iframe.html 代码如下:<html>[removed]</sc

			
		

	





	

		

			

				
					
js中的位置[一]

				
			

			

				

					weixin_30737433的博客
				

				

					12-12
					
					227
					
				

			

		

		

			
				
<script>var s; s += "\r\n网页可见区域宽："+ document.body.clientWidth; s += "\r\n网页可见区域高："+ document.body.clientHeight; s += "\r\n网页可见区域宽："+ document.body.offsetWidth+" (包括边线的宽)"; s += "\r\n网页可见区域高："+ d...

			
		

	





	

		

			

				
					
jquery 子页面控制父页面IFRAME的高度

				
			

			

				

					qq_29663071的博客
				

				

					04-18
					
					1万+
					
				

			

		

		

			
				
$(window.parent.document).find("#mainFrame").css("height",""+mainFrameheigth+"px");
　　jquery取得iframe元素的方法：
　　收集利用Jquery取得iframe中元素的几种方法: 
　　Js代码 
　　$(document.getElementById('iframeId').contentWin

			
		

	





	

		

			

				
					
jquery如何获得父级窗口的大小

				
			

			

				

					zzm628的专栏
				

				

					07-03
					
					977
					
				

			

		

		

			
				
方法如下：
$(window.parent.window).width()



注意：
window可以省略，如：$(parent).width()，parent可以有多级，比如：$(parent.parent).width()

			
		

	





	

		

			

				
					
使用JQuery控制iframe自适应窗口大小

				
			

			

				

					lntlky的专栏
				

				

					06-06
					
					4601
					
				

			

		

		

			
				
最近遇到iframe自适应窗口大小的问题，最后用决定使用jquery解决问题。代码如下：  $(function(){	//注册加载事件	$("#rightFrame").load(pagestyle);	//注册窗体改变大小事件	$(window).resize(pagestyle);});//调用函数var pagestyle = function (){

			
		

	





	

		

			

				
					
调整iframe  父页面的高度

				
			

			

				

					猎人在吃肉
				

				

					06-04
					
					1045
					
				

			

		

		

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

	//...

			
		

	





	

		

			

				
					
iframe 中的页面如何重置 iframe的大小

				
			

			

				

					小X的书屋
				

				

					08-30
					
					2544
					
				

			

		

		

			
				
今天在工作中遇到一个事情，我们的一个页面放在iframe里，现在发现iframe 由于高度太高需要设置他的高度，不然底部留白太多。

用这句话解决：



parent.$(&quot;iframe&quot;)[0].style.height = &quot;1400px&quot;;

这句话放在iframe里头的页面js里执行，解释一下 
parent 获取父框架 
$(&quot;iframe&quot;)[0] 在父框架中查找iframe,返回的..

			
		

	





	

		

			

				
					
div随着浏览器窗口大小变更，改变大小（resize）

					
热门推荐

				
			

			

				

					xuanlv_haoshao的博客
				

				

					04-01
					
					4万+
					
				

			

		

		

			
				
浏览器的放大缩小会导致网页布局变动，jquery的resize()方法，可以根据浏览器的窗口大小的变动，对网页进行操作：以下是div随着浏览器窗口大小变更，改变大小（resize）的案例：html:js效果：resizeDiv的块会根据网页变更，大小也随之改变...

			
		

	





	

		

			

				
					
使用jQuery实现iframe父子页面交互示例

				
			

			

				

					
				

			

		

		

			
				
- **jQuery 与 iframe 结合使用**：标签暗示了在实现父页面与子页面交互功能时，jQuery库被用来简化操作和实现更复杂的交互逻辑。  ### 压缩包子文件的文件名称列表：“testdemo” - **文件内容示例**：文件名称...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值