关于Javascript与iframe的那些事儿


Posted in Javascript onJuly 04, 2013

嵌入 iframe 的页面,父页面与子页面均可以很轻松的在同域或跨子域的情况下进行读写操作;在完全不同域的情况下,也可以通过更改 hash 的方式进行通信。下面我在九个不同(版本的)浏览器中对此进行数据传输与更改的兼容性测试。
同域或跨子域读写操作 iframe 里的内容
父页面读写操作子页面:

<iframe id="test-iframe" name="test-iframe" src="child.html" scrolling="no" frameborder="0"></iframe>
<script>
window.onload = function () {
  /*
   *  下面两种获取节点内容的方式都可以。
   *  由于 IE6, IE7 不支持 contentDocument 属性,所以此处用了通用的
   *  window.frames["iframe Name"] or window.frames[index]
   */
  var d = window.frames["test-iframe"].document;
  d.getElementsByTagName('h1')[0].innerHTML = 'pp';
  alert(d.getElementsByTagName('h1')[0].firstChild.data);
}
</script>

注:在请务必通过 window.onload 方法访问 iframe 中的节点,否则浏览器会提示错误-拒绝访问。在 IE8, Firefox3.6, Opera11 下在DOMReady 时也可以访问 iframe 中的节点。
子页面读写操作父页面:
<script>
  parent.document.getElementsByTagName('h1')[0].innerHTML = 'pp';
  alert(parent.document.getElementsByTagName('h1')[0].firstChild.data);
</script>

小结:
•1 测试通过 IE6, IE7, IE8, Firefox2.0, Firefox3.0, Firefox3.6, Chrome8, Opera11, Safari5.
•2 查阅资料得出 document.getElementById(‘id name').contentDocument 全等于 window.frames["iframe Name"].document.
•3 跨子域时,需要在父页面和子页面 JS 中分别加上 document.domain = 'xxx.com';
跨域操作 iframe 里内容
当两个网页所在域不同时,要实现数据的互相调用,只能通过 JS 改变 location 对象的 hash 属性的值来做到互相通信。
父页面:
<iframe id="test-iframe" src="http://www.yyy.com/child.html" scrolling="no" frameborder="0"></iframe>
<input type="button" value="send" onclick="sendRequest()" />
<script>
function sendRequest() {
  document.getElementById('test-iframe').src += '#a';
}
var interval = window.setInterval(function(){
  if(location.hash) {
    alert(location.hash);
    window.clearInterval(interval);
  }
},1000);
</script>

子页面:
<h1>RRRRRR</h1>
<script>
var url = 'http://www.xxx.com/father.html';
    oldHash = self.location.hash,
    newHash,
    interval = window.setInterval(function(){
        newHash = self.location.hash;
        if(oldHash != self.location.hash) {
        document.getElementsByTagName('h1')[0].innerHTML = 'pp';
        //alert(parent.location.href); //去掉这个注释,浏览器会提示无权限
        parent.location.href = url + '#b';
          window.clearInterval(interval);
        }
    },500);
</script>

小结:
•1 经测试 IE6, IE7, IE8, Firefox2.0, Firefox3.0, Firefox3.6, Chrome8, Opera11, Safari5, 除 IE6, IE7 外只要改变hash 就会记录在浏览器 history 中。
•2 我有试图在子页面用 parent.location.replace 的方法来避免父页面向服务器发送请求而进行跳转,这样理论上浏览器就不会记录历史,但未能奏效。
•2 子页面无权读取父页面的 url, 但可以对父页面的 url 进行写操作,所以跨域操作时,要提前得知父页面的url
由于前端解决跨域问题的局限性比较大,所以最好用服务器端解决方案
Javascript 相关文章推荐
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Jan 07 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 Javascript
Extjs单独定义各组件的实例代码
Jun 25 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 Javascript
js将json格式内容转换成对象的方法
Nov 01 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
Bootstrap自定义文件上传下载样式
May 26 Javascript
AngularJS通过$location获取及改变当前页面的URL
Sep 23 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 #Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 #Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 #Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 #Javascript
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 #Javascript
解析jQuery与其它js(Prototype)库兼容共存
Jul 04 #Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 #Javascript
You might like
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
Laravel框架实现多个视图共享相同数据的方法详解
2019/07/09 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
2010/03/15 Javascript
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
Node.js实现文件上传
2016/07/05 Javascript
详解用node编写自己的cli工具
2017/05/23 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
vue中添加与删除关键字搜索功能
2019/10/12 Javascript
Python实现计算最小编辑距离
2016/03/17 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
pycharm 配置远程解释器的方法
2018/10/28 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
高考考python编程是真的吗
2020/07/20 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
Staples加拿大官方网站:办公用品一站式采购
2016/09/25 全球购物
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
五年级下册复习计划
2015/01/19 职场文书
联谊活动总结范文
2015/05/09 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
利用Python读取微信朋友圈的多种方法总结
2021/08/23 Python
MySQL修炼之联结与集合浅析
2021/10/05 MySQL
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers