iframe在复合文档中常常用到,利用jquery操作iframe可以大幅提高效率,本文紧张给大家分享了关于大略利用JQUERY来操作IFRAME的一些记录,这个利用纯JS也可以实现。下面话不多说了,来一起看看详细的先容吧。
第一、在iframe中查找父页面元素的方法:
$('#id', window.parent.document)
第二、在父页面中获取iframe中的元素方法:
$(this).contents().find("#id")
第三、在iframe中调用父页面中定义的方法和变量:
parent.method parent.value
JQUERY、JS调用IFRAME父窗口与子窗口元素的方法
1.jquery 在iframe子页面获取父页面元素代码如下:
$("#id", parent.document)
2. jquery在父页面 获取iframe子页面的元素 代码如下:
$("#id",document.frames('iframename').document)
3.js 在iframe子页面获取父页面元素代码如下:
window.parent.document.getElementByIdx_x("id");
4.js 在父页面获取iframe子页面元素代码如下:
window.frames["iframe_ID"].document.getElementByIdx_x("id");
5.子类iframe内调用父类函数:
window.parent.func();
jquery_iframe父子级页面事宜利用
1、index.html
<body topmargin='0' leftmargin='0' style="background:#ccc"> //这里的属性只是为了全屏下边无间隙 index.html <iframe src="main.html" id="indexMain" style="margin-bottom:-5px;position:relative;"></iframe> //这里的样式的为了跳转之后移动端input输入完成之后下边无间隙</body><script>/父级本页面事宜/ function oIndexFn(){ alert("父级页面index.html事宜调用成功"); }/调用子页面事宜/$(document).click(function(){ alert("您点击的是父页面[index]") $("#indexMain")[0].contentWindow.oMainFn(); //iframe的id})</script>
2、main.html
<body style="background:#f0f0f0"> main.html</body><script>/子级本页面事宜/ function oMainFn(){ alert("子页面main.html事宜调用成功"); }/调用父页面事宜/$(document).click(function(){ alert("您点击的是子页面!
[main]") parent.window.oIndexFn(); //调用父级页面事宜})</script>
利用JQuery操作iframe父页面、子页面的元素和方法汇总