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中对象介绍
Dec 31 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
Oct 14 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
Dec 03 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
原生js实现轮播图
Feb 27 Javascript
vue点击当前路由高亮小案例
Sep 26 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 Javascript
javascript+css实现俄罗斯方块小游戏
Jun 28 Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
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
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
PHP 中dirname(_file_)讲解
2007/03/18 PHP
php中判断文件空目录是否有读写权限的函数代码
2012/08/07 PHP
解析php中heredoc的使用方法
2013/06/17 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
Extjs学习笔记之四 工具栏和菜单
2010/01/07 Javascript
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
JavaScript多线程详解
2015/08/12 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
jQuery EasyUI Draggable拖动组件
2017/03/01 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
js中this对象用法分析
2018/01/05 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
python使用requests.session模拟登录
2019/08/09 Python
施工工地安全标语
2014/06/07 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
Python IO文件管理的具体使用
2022/03/20 Python
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang