js iframe跨域访问(同主域/非同主域)分别深入介绍


Posted in Javascript onJanuary 24, 2013

js跨域是个讨论很多的话题。iframe跨域访问也被研究的很透了。
一般分两种情况
一、 是同主域下面,不同子域之间的跨域

同主域,不同子域跨域,设置相同的document.domian就可以解决;
父页访问子页,可以document.getElementById("myframe").contentWindow.document来访问iframe页面的内容;如果支持contentDocument也可以直接document.getElementById("myframe").contentDocument访问子页面内容;

子页访问父页,可以parent.js全局属性
二、 是不同主域跨域

前提,www.a.com下a.html,a.html内iframe调用了www.b.com下的b.html,b.html下iframe调用了www.a.com下的c.html

b.html是不无法直接访问a.html的对象,因为涉及到跨域,但可以访问parent,同样c.html的parent可以访问b.html。c.html和a.html同域,是可以访问a下的对象的。parent.parent.js对象!

看下面实例:

a.html

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>无标题文档</title> 
</head> 
<body> 
<iframe src="http://www.b.com/b.html" ></iframe> 
<ul id="getText"></ul> 
<script> 
function dosome(text){ 
document.getElementById("getText").innerHTML= decodeURI(text); 
} 
</script> 
</body> 
</html>

b.html
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>无标题文档</title> 
</head> 
<body> 
<iframe id="myfarme" src="###"></iframe> 
<ul id="ct"> 
<li>这里是内容1</li> 
<li>这里是内容2</li> 
<li>这里是内容3</li> 
<li>这里是内容4</li> 
<li>这里是内容5</li> 
<li>这里是内容6</li> 
</ul> 
<script> 
window.onload = function(){ 
var text = document.getElementById('ct').innerHTML; 
document.getElementById('myfarme').src="http://www.a.com/c.html?content="+encodeURI(text); 
} 
</script> 
</body> 
</html>

c.html
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>无标题文档</title> 
<script> 
window.onload = function(){ 
var text = window.location.href.split('=')[1] 
console.log(parent.parent) 
parent.parent.dosome(text); 
} 
</script> 
</head> 
<body> 
ddddddddddd 
</body> 
</html>
Javascript 相关文章推荐
javascript  Error 对象 错误处理
May 18 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
js获取某月的最后一天日期的简单实例
Jun 22 Javascript
JQuery中使用Ajax赋值给全局变量异常的解决方法
Jan 10 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
基于 Bootstrap Datetimepicker 联动
Aug 03 Javascript
js实现方块上下左右移动效果
Aug 17 Javascript
jquery插件开发之选项卡制作详解
Aug 30 jQuery
详解JavaScript事件循环机制
Sep 07 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 Javascript
JavaScript 判断浏览器是否是IE
Feb 19 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 #Javascript
ajax处理php返回json数据的实例代码
Jan 24 #Javascript
一个级联菜单代码学习及removeClass与addClass的应用
Jan 24 #Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 #Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 #Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 #Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
Jan 24 #Javascript
You might like
S900/ ETON E1-XM 收音机
2021/03/02 无线电
php 读取文件乱码问题
2010/02/20 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
js实现div色块碰撞
2020/01/16 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
解决python写的windows服务不能启动的问题
2014/04/15 Python
用Python写冒泡排序代码
2016/04/12 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
python 日志 logging模块详细解析
2020/03/31 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
艺术设计专业个人求职信
2013/09/21 职场文书
《三峡》教学反思
2014/03/01 职场文书
建筑设计专业求职自我评价
2014/03/02 职场文书
委托书模板
2014/04/04 职场文书
导师就业推荐信范文
2014/05/22 职场文书
信息合作协议书
2014/10/09 职场文书
护士工作心得体会
2016/01/25 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis