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 相关文章推荐
在IE下:float属性会影响offsetTop的取值
Dec 22 Javascript
Javascript 面向对象(三)接口代码
May 23 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
详解vue-cli 脚手架 安装
Apr 16 Javascript
layui 实现表格某一列显示图标
Sep 19 Javascript
vue实现路由不变的情况下,刷新页面操作示例
Feb 02 Javascript
JavaScript实现单点登录的示例
Sep 23 Javascript
JavaScript十大取整方法实例教程
Dec 03 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 define的第二个参数使用方法
2013/11/04 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
twig模板常用语句实例小结
2016/02/04 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
javascript设计模式 封装和信息隐藏(上)
2012/07/24 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
2013/01/09 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
2013/04/02 Javascript
jQuery操作动态生成的内容的方法
2016/05/28 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
2017/06/03 Javascript
Vue实现点击后文字变色切换方法
2018/02/11 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
Python set常用操作函数集锦
2017/11/15 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
Gina Bacconi官网:吉娜贝康尼连衣裙和礼服
2018/04/24 全球购物
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
函数指针的定义是什么
2016/08/14 面试题
一套英文Java笔试题面试题
2016/04/21 面试题
酒吧总经理岗位职责
2013/12/10 职场文书
投标单位介绍信
2014/01/09 职场文书
酒店个人求职信范文
2014/01/25 职场文书
日语专业个人求职信范文
2014/02/02 职场文书
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL