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修改css样式style
Apr 15 Javascript
javascript window对象属性整理
Oct 24 Javascript
HTML DOM的nodeType值介绍
Mar 31 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
Nov 21 Javascript
JS动态修改iframe内嵌网页地址的方法
Apr 01 Javascript
JS实现图片平面旋转的方法
Mar 01 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
Vue.js开发环境快速搭建教程
Mar 17 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
使用vue构建一个上传图片表单
Jul 04 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
vue实现点击追加选中样式效果
Nov 01 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
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
JavaScript 的方法重载效果
2009/08/07 Javascript
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
微信小程序 form组件详解及简单实例
2017/01/10 Javascript
微信小程序 slider 详解及实例代码
2017/01/10 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
2018/12/13 Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
2019/01/25 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
python中字符串类型json操作的注意事项
2017/05/02 Python
Python实现网站表单提交和模板
2019/01/15 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
HTML5轻松实现全屏视频背景的示例
2018/04/23 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
公司财务自我评价分享
2013/12/17 职场文书
教师绩效工资方案
2014/02/01 职场文书
《最大的“书”》教学反思
2014/02/14 职场文书
体育活动总结范文
2014/05/04 职场文书
说明书怎么写
2014/05/06 职场文书
给客户的感谢信
2015/01/21 职场文书
小学教代会开幕词
2016/03/04 职场文书
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
2021/05/25 HTML / CSS