关于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 相关文章推荐
jQuery中data()方法用法实例
Dec 27 Javascript
浅谈jquery事件处理
Apr 24 Javascript
javascript实现简单的进度条
Jul 02 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
浅谈对于react-thunk中间件的简单理解
May 01 Javascript
JS实现扫码枪扫描二维码功能
Jan 03 Javascript
layui使用及简单的三级联动实现教程
Dec 01 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防止伪造的数据从URL提交方法
2014/06/27 PHP
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
JavaScript与HTML的结合方法详解
2015/11/23 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
jquery实现淡入淡出轮播图效果
2020/12/13 jQuery
[52:02]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第二场 2月26日
2021/03/11 DOTA
读写json中文ASCII乱码问题的解决方法
2016/11/05 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
电大物流学生的自我评价
2013/10/25 职场文书
大学生演讲稿
2014/04/25 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
长江七号观后感
2015/06/11 职场文书
北京青年观后感
2015/06/15 职场文书
西游降魔篇观后感
2015/06/15 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
深入探讨opencv图像矫正算法实战
2021/05/21 Python