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 一段左右两边随屏滚动的代码
Jun 18 Javascript
javascript 写类方式之十
Jul 05 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
select标签模拟/美化方法采用JS外挂式插件
Apr 01 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
js判断设备是否为PC并调整图片大小
Feb 12 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
Mar 13 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 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
php下实现折线图效果的代码
2007/04/28 PHP
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
JavaScript实现数字前补“0”的五种方法示例
2019/01/03 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
Swiper实现导航栏滚动效果
2020/10/16 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
python 从远程服务器下载东西的代码
2013/02/10 Python
Python中使用Flask、MongoDB搭建简易图片服务器
2015/02/04 Python
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
python 3.6 +pyMysql 操作mysql数据库(实例讲解)
2017/12/20 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
HTML5 常用语法一览(列举不支持的属性)
2010/01/26 HTML / CSS
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
全球性的女装店:storets
2019/06/12 全球购物
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
高校生生产实习自我鉴定
2013/09/21 职场文书
电子商务毕业生求职信
2013/11/10 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
创建市级文明单位实施方案
2014/03/01 职场文书
应聘文员自荐信范文
2014/03/11 职场文书
销售总经理岗位职责
2014/03/15 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
团员个人年度总结
2015/02/26 职场文书
2016年教师节慰问信
2015/12/01 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书