iframe在复合文档中常常用到,利用jquery操作iframe可以大幅提高效率,本文紧张给大家分享了关于大略利用JQUERY来操作IFRAME的一些记录,这个利用纯JS也可以实现。
下面话不多说了,来一起看看详细的先容吧。

第一、在iframe中查找父页面元素的方法:

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

第二、在父页面中获取iframe中的元素方法:

jsp子页面获取父页面变量值应用JQuery操作iframe父页面/子页面元素和办法汇总 GraphQL

$(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父页面、子页面的元素和方法汇总