JS 和 JQuery 对 Iframe 内外（父子）页面进行操作

在web开发中，经常会用到iframe，难免会碰到需要在父窗口中使用iframe中的元素、或者在iframe框架中使用父窗口的元素

JS

在父窗口中获取iframe中的元素

1、格式：window.frames["iframe的name值"].document.getElementByIdx_x("iframe中控件的ID").click();

     实例：window.frames["ifm"].document.getElementByIdx_x("btnOk").click();

2、var obj=document.getElementByIdx_x("iframe的name").contentWindow;

     var ifmObj=obj.document.getElementByIdx_x("iframe中控件的ID");

      fmObj.click();

实例：var obj=document.getElementByIdx_x("ifm").contentWindow;

          var ifmObj=obj.document.getElementByIdx_x("btnOk");

          ifmObj.click();

在iframe中获取父窗口的元素

格式：window.parent.document.getElementByIdx_x("父窗口的元素ID").click();

实例：window.parent.document.getElementByIdx_x("btnOk").click();

jquery

在父窗口中获取iframe中的元素

1、格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1

     实例：$("#ifm").contents().find("#btnOk").click();//jquery 方法1

2、格式：$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2

     实例：$("#btnOk",document.frames("ifm").document).click();//jquery 方法2

在iframe中获取父窗口的元素

格式：$('#父窗口中的元素ID', parent.document).click();

实例：$('#btnOk', parent.document).click();

新增方法：

1.js在iframe子页面操作父页面元素代码：

window.parent.document.getElementByIdx_x("父页面元素id");

2.js在父页面获取iframe子页面元素代码如下:

window.frames["iframe_ID"].document.getElementByIdx_x("子页面元素id");

3. jquery在iframe子页面获取父页面元素代码如下:

$("#objid",parent.document)

4. jquery在父页面获取iframe子页面的元素·

$("#objid",document.frames('iframename').document)

5.在iframe中调用父页面中定义的方法和变量：

window.parent.window.parentMethod();
window.parent.window.parentValue;

6.在父页面操作iframe子页面的方法和变量

//code from http://caibaojian.com/js-get-iframe.html
window.frames["iframe_ID"].window.childMethod();
window.frames["iframe_ID"].window.childValue;

非常感谢原创提供的技术方法!

原文地址:js与jQuery 获取父窗、子窗的iframe