最近在做一個專案，中間有嵌套了一些ifream的東西，現在做一下整理，方便日後自己使用！

第一，在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的值：

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

第四，在父頁面中獲取iframe中的方法：

子頁面中有方法如下：

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

父頁面中呼叫子頁面中的方法如下：

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

結果會彈出提示：“我是子頁面的方法” 

第五，父頁面中ifream的大小高度自適應（此處支援父頁面中的高度會跟隨子頁面的高度變化而變化，網上處方法甚少），以後可以直接貼上拿過去用，很方便。

父頁面的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();//初始化事件
});

謹以此篇文章記錄自己在ifream中遇到問題，有不足之處還望指出！在總結中成長，一天一篇技術分享和總結！