用JS访问操作iframe框架里的dom
作者：apple 来源：Alipay UED 时间：2008-11-10 13:05:00
很多人一直都有个想法，要是可以随心所欲的操作iframe就好了。这样静态页面也就有了相当于后台动态页面php,jsp,asp中include，require实现统一多页面布局的能力。
通过Javascript的帮忙我们可以像后台一样动态加载操作iframe对象属性src指向的html页面的内容。这样的操作需要提供两个页面，一个页面是iframe所在页面(页面名称：iPage.html)，另一个页面是iframe属性src指向页面（页面名称：srcPage.html）。
iPage.html，<body>里dom：
<iframe id=“iId“ name=“iName“ src=“srcPage.html“ scrolling=“no“ frameborder=“0“></iframe>
srcPage.html，<body>里dom：
<h1>妹妹的一天</h1>
<p>早上吃早点，中午约会吃饭，下午K歌，晚上和哥哥瞎折腾</p>
下面讨论ie下JS是怎么操作以上两个页面，再讨论firefox的做法，最后给出兼容ie,firefox浏览器操作iframe对象的方法。
一、ie下访问操作iframe里内容
大家都知道iframe是非标准html标签，它是由ie浏览器推出的多布局标签, 随后Mozilla也支持了这个标签。(闲话，嘿嘿)
1. ie通过document.frames["IframeName"]获取它，例子：我们在iPage.html里输出srcPage.html里h1的内容，JS如下：
alert(document.frames["iName"].document.getElementsByTagName(‘h1‘)[0].firstChild.data);
你会发现这样在页面里加入代码，好像并没有输出想要的东东，为什么呢？这个我也没有搞清楚，只是习惯性的加入了window.onload就有输出了（注：JS代码都写到这个事件里去），知道的人士可否告诉我下。why?更改之后代码ie下有了输出，firefox下document.frames没有定义错误提示：
window.onload = (function () {
alert(document.frames["iName"].document.getElementsByTagName(‘h1‘)[0].firstChild.data);
});
2. ie另一种方法contentWindow获取它，代码：
window.onload = (function () {
var iObj = document.getElementById(‘iId‘).contentWindow;
alert(iObj.document.getElementsByTagName(‘h1‘)[0].firstChild.data);
});
此方法经过ie6,ie7,firefox2.0,firefox3.0测试都通过，好事啊！嘿嘿。（网上一查，发现Mozilla Firefox iframe.contentWindow.focus缓冲区溢出漏洞，有脚本注入攻击的危险。
后来听说可以在后台防止这样的事情发生，算是松了口气。不过还是希望firefox新版本可以解决这样的危险。）
3.改变srcPage.html里h1标题内容，代码：
iObj.document.getElementsByTagName(‘h1‘)[0].innerHTML=‘我想变成她一天的一部分‘; 通过contentWindow后访问里面的节点就和以前一样了。
0
投稿猜你喜欢
Python的Django框架中模板碎片缓存简介
Python pandas RFM模型应用实例详解
ASP.Net Core MVC基础系列之中间件
在Oracle PL/SQL中游标声明中表名动态变化的方法
MYSQL必知必会读书笔记第五章之排序检索数据
PHP实现定时生成HTML网站首页实例代码
一文详解Python中多进程和进程池的使用方法
Go语言实现socket实例
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
python爬取之json、pickle与shelve库的深入讲解
python模块的安装以及安装失败的解决方法
JavaScript中访问节点对象的方法有哪些如何使用
网页的栅格设计思考
Python基础中所出现的异常报错总结
Python调整数组形状如何实现
css特性:空白外边距互相叠加
python清除指定目录内所有文件中script的方法
Django 内置权限扩展案例详解
Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)
