jquery之iframe的一些操作和处理

最近在做一个项目，中间有嵌套了一些iframe的东西，现在做一下整理，方便日后自己使用！

第一，在iframe中查找父页面元素的方法：

父页面如下所示：

<!--父页面 -->
<input type="hidden" name="id" id="id" value="2222" />

例如子页面想获取父页面的某个字段的值，子页面方法中可以使用如下的代码，即可得到value=2222的值：

$('#id', window.parent.document).val();

第二，在iframe中调用父页面中定义的方法或者变量：

父页面中有方法和变量如下：

var globalVal="我是全局变量";

function testSonGetParentFunction(){
   alert("我是父页面的方法");
}

子页面中可以通过如下的方法获取：

//子页面调用父页面的方法或获取父页面的变量值的方法
function testGetVal(){

    parent.testSonGetParentFunction();//可以调用父页面的方法

    alert(parent.globalVal);//获取父页面的变量值
}

结果会弹出提示：“我是父页面的方法”       “我是全局变量”

第三，在父页面中获取iframe中的元素方法：

子页面中有如下代码信息：

<!--子页面 -->
<input type="hidden" name="id" id="id" value="214" />

父页面可以通过如下方法获取子页面中元素的值，即可得到value=214的值：

//iframe的id
$("#iframe").contents().find("#id").val();

第四，在父页面中获取iframe中的方法：

子页面中有方法如下：

//子页面的方法
function  parentGetSonVal(){
    alert("我是子页面的方法");
}

父页面中调用子页面中的方法如下：

//iframe的id
$("#iframe")[0].contentWindow.parentGetSonVal();

结果会弹出提示：“我是子页面的方法” 

第五，父页面中iframe的大小高度自适应（此处支持父页面中的高度会跟随子页面的高度变化而变化，网上处方法甚少），以后可以直接粘贴拿过去用，很方便。

父页面的html代码：

<iframe id="mainiframe" src="自定义的链接"  width="100%" frameborder="0" scrolling="no"></iframe>

父页面中自适应高度的代码如下（标准的js页面写法如下）：

var applyForm={
		//绑定元素改变事件
		changeEvent : {
				
		},
		//元素显示与隐藏 
		initShowHide:{
			
		},
		//一般函数
		normalEvent:{
			//设置ifream的高度
			reinitIframe:function(){
				var iframe = document.getElementById("mainiframe");                        
				var bHeight =iframe.contentWindow.document.body.scrollHeight;               
				var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;              
				var height = Math.max(bHeight, dHeight);           
				iframe.height = height;   
			},
			//ifream的高度自适应函数  
			setifreamHeight : function(){
				//定时的动态刷新ifream的高度 定时去检查iframe的高度,这样保证时时都是自动高了 
				window.setInterval("applyForm.normalEvent.reinitIframe()", 200);
				//监听浏览器窗口的大小变化
				window.onresize=function(){
					applyForm.normalEvent.reinitIframe();
				}
			}, 
		}, 
		//初始化事件 
		initEvent: {
			initEvent:function(){
				//普通函数事件 
				applyForm.normalEvent.setifreamHeight();//定时的动态刷新ifream的高度
			},
		}
}

$(function(){
		applyForm.initEvent.initEvent();//初始化事件
});

父页面中自适应高度的代码如下（常规js页面写法如下）：

//设置ifream的高度
function   reinitIframe(){
	var iframe = document.getElementById("mainiframe");                        
	var bHeight =iframe.contentWindow.document.body.scrollHeight;               
	var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;              
	var height = Math.max(bHeight, dHeight);           
	iframe.height = height;   
}

//ifream的高度自适应函数  
function setifreamHeight(){
	//定时的动态刷新ifream的高度
	window.setInterval("reinitIframe()", 200);//定时去检查iframe的高度,这样保证时时都是自动高了 
 	//监听浏览器窗口的大小变化
    window.onresize=function(){
   	  reinitIframe();//设置ifream的高度
   }
}, 

$(function(){
	setifreamHeight();//初始化事件
});

谨以此篇文章记录自己在iframe中遇到问题，有不足之处还望指出！在总结中成长，一天一篇技术分享和总结！

2018101些许优化：

//设置ifream的高度(这样子计算会准一点，如果上面的高度不正确了可以试试这个！)
function   reinitIframe(){
	var iframe = document.getElementById("mainiframe");                                     
	var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;                       
	iframe.height = dHeight ;   
}