JS获取并操作iframe中元素的⽅法
JS获取/设置iframe内对象元素、⽂档的⼏种⽅法
1、IE专⽤(通过frames索引形象定位)：
复制代码代码如下:
document.frames[i].ElementById('元素的ID');
2、IE专⽤(通过iframe名称形象定位)：
复制代码代码如下:
document.frames['iframe的name'].ElementById('元素的ID');
以上⽅法，不仅对iframe适⽤，对frameset⾥的frame也同样适⽤。IE虽然擅于⾃定标准，但不得不说它很多的设计还是⽐较体现⼈性化的。⽐如这个，它在同样⽀持下⾯的标准路径之外，提供了⼀个简洁且形象化的写法。
3、通⽤⽅法：
复制代码代码如下:
注意要加上contentWindow，往往出现问题都是因为这个容易被忽略，它代表frame和iframe内部的窗⼝对象。
JS获取iframe⽂档内容
复制代码代码如下:
<script type="text/javascript">
function getIframeContent(){  //获取iframe中⽂档内容
var doc;
if (document.all){ // IE
doc = document.frames["MyIFrame"].document;
}else{ // 标准
doc = ElementById("MyIFrame").contentDocument;
}
return doc.body.innerHTML;
}
</script>
注意：上⾯的 .contentDocument 相当于 .contentWindow.document ！
⼀、需求与遇到的问题
  在⽹站的后台管理中使⽤了iframe框架布局，包括顶部菜单、左侧导航和主页⾯。需求是：点击主页⾯上的⼀个按钮，在顶部菜单栏的右侧显⽰“退出”链接，点击可退出系统。
  我的思路是：在顶部的菜单页⾯放⼀个不可见的“退出”链接，当⽤户点击位于iframe中的主页⾯（mainPage.htm）中的按钮时，在顶部菜单页⾯的右侧显⽰“退出”。
  我现在遇到的问题是：如何在页⾯的⼀个iframe⼦页⾯（mainPage.htm）中获取并且操作其它iframe
⼦页⾯（⽐如topPage.htm）中的HTML元素？
⼆、通过JS获取并操作iframe中的元素来解决问题
  这⾥主要就是通过JS来操作Window对象。Window 对象表⽰浏览器中打开的窗⼝，如果⽂档包含框架（frame 或 iframe 标签），浏览器会为 HTML ⽂档创建⼀个 window 对象，并为每个框架创建⼀个额外的 window 对象。
  经过我在⽹上查资料，到了JS操作iframe中HTML元素的⽅法。⽰例如下。
复制代码代码如下:
function ShowExit() {
html frame
//获取iframe的window对象
var topWin = ElementById("topNav").contentWindow;
//通过获取到的window对象操作HTML元素，这和普通页⾯⼀样
ElementById("exit").style.visibility = "visible";
}　
说明：第⼀步，通过ElementById("topNav")⽅法获取了顶部菜单页⾯（topPage.htm）所在的iframe 对象；第⼆步，通过上⼀步获取到的iframe对象的contentWindow属性得到了iframe中元素所在的window对象；第三步，通过上⼀步获取到的window对象来操作iframe框架中的元素，这和操作不在iframe框架中的普通HTML元素是⼀样的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。