jquery之ifream的一些操作和處理
阿新 • • 發佈:2018-11-11
最近在做一個專案,中間有嵌套了一些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中遇到問題,有不足之處還望指出!在總結中成長,一天一篇技術分享和總結!