iframe的操作-Js/Jquery获取iframe中的元素

本是古典何须时尚 2022-05-28 10:06 238阅读 0赞

### Js/Jquery获取iframe中的元素 ###

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

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

Js代码   ![收藏代码][icon_star.png]

1.  格式：window.frames\["iframe的name值"\].document.getElementById("iframe中控件的ID").click();  
2.  实例：window.frames\["ifm"\].document.getElementById("btnOk").click();

Java代码   ![收藏代码][icon_star.png]

1.  格式：  
2.  var obj=document.getElementById("iframe的name").contentWindow;  
3.  var ifmObj=obj.document.getElementById("iframe中控件的ID");  
4.  ifmObj.click();  
5.  实例：  
6.  var obj=document.getElementById("ifm").contentWindow;  
7.  var ifmObj=obj.document.getElementById("btnOk");  
8.  ifmObj.click();

在iframe中获取父窗口的元素

Js代码   ![收藏代码][icon_star.png]

1.  格式：window.parent.document.getElementById("父窗口的元素ID").click();  
2.  实例：window.parent.document.getElementById("btnOk").click();

jquery

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

Js代码   ![收藏代码][icon_star.png]

1.  格式：$("\#iframe的ID").contents().find("\#iframe中的控件ID").click();//jquery 方法1  
2.  实例：$("\#ifm").contents().find("\#btnOk").click();//jquery 方法1

Js代码   ![收藏代码][icon_star.png]

1.  格式：$("\#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2  
2.  实例：$("\#btnOk",document.frames("ifm").document).click();//jquery 方法2

在iframe中获取父窗口的元素

Js代码   ![收藏代码][icon_star.png]

1.  格式：$('\#父窗口中的元素ID', parent.document).click();  
2.  实例：$('\#btnOk', parent.document).click();

[icon_star.png]: /images/20220528/6f4bab15c3a54f4ea0fcc74cdbabd2a2.png