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.οnresize=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.οnresize=function(){
   	  reinitIframe();//设置ifream的高度
   }
}, 

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

些许优化:

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

来源:https://blog.csdn.net/u014135369/article/details/83141686

作者
分类 网站建设, 电脑网络

评论

本文评论功能已关闭。

← 较早的 较新的 →

相关文章