例子
$(window.frames["iframe1"].document).find("input[@type='radio']").attr("checked", true);
在IFRAME中操作 选中父窗口中的所有单选钮
$(window.parent.document).find("input[@type='radio']").attr("checked","true");
iframe框架的:
<iframe id="iframe1" src="test.html" height="300" width="700" frameborder="0" scrolling="auto"></iframe></li>
在父页面 获取iframe子页面的元素
代码如下:
$("#objid",document.frames('iframename').document)
$(document.getElementById('iframeId').contentWindow.document.body).html()
显示iframe中body元素的内容。
$("#testId", document.frames("iframename").document).html();
根据iframename取得其中ID为"testId"元素
$(window.frames["iframeName"].document).find("#testId").html()
通过JS获取并操作iframe中的元素来解决问题
这里主要就是通过JS来操作Window对象。Window 对象表示浏览器中打开的窗口,如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。
经过我在网上查资料,找到了JS操作iframe中HTML元素的方法。示例如下。
复制代码
1 function ShowExit() {
2 //获取iframe的window对象
3 var topWin = window.top.document.getElementById("topNav").contentWindow;
4 //通过获取到的window对象操作HTML元素,这和普通页面一样
5 topWin.document.getElementById("exit").style.visibility = "visible";
6 }
复制代码
说明:第一步,通过window.top.document.getElementById("topNav")方法获取了顶部菜单页面(topPage.htm)所在的iframe对象;第二步,通过上一步获取到的iframe对象的contentWindow属性得到了iframe中元素所在的window对象;第三步,通过上一步获取到的window对象来操作iframe框架中的元素,这和操作不在iframe框架中的普通HTML元素是一样的。
下面是我在重现以及解决这个问题时写的全部代码(布局太丑,但重点是JS方法):
1.使用iframe框架布局的顶级页面(JS操作iframe中的元素.htm)
View Code
2.顶部菜单栏页面(topPage.htm)
View Code
3.左侧导航栏(leftPage.htm)
View Code
4.需要访问顶部菜单页面元素的主页面(mainPage.htm)
View Code
5.底部页面(bottomPage.htm)
复制代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>底部页面</title>
5 </head>
6 <body>
7 <div>
8 底部版权区:这是一个底部的测试页面
9 </div>
10 </body>
11 </html>