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 getElementsByClassName实现代码
Oct 11 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 Javascript
js实现索引图片切换效果
Nov 21 Javascript
移动端手指放大缩小插件与js源码
May 22 Javascript
关于Stream和Buffer的相互转换详解
Jul 26 Javascript
微信小程序picker组件简单用法示例【附demo源码下载】
Dec 05 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
ES6小技巧之代替lodash
Jun 07 Javascript
Angular8 Http拦截器简单使用教程
Aug 20 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
three.js 将图片马赛克化的示例代码
Jul 31 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版(2)
2006/10/09 PHP
php foreach 参数强制类型转换的问题
2010/12/10 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
PHP实现获取某个月份周次信息的方法
2015/08/11 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
做web开发 先学JavaScript
2014/12/12 Javascript
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
JS中对Cookie的操作详解
2016/08/05 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
python开发之函数定义实例分析
2015/11/12 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
Python中进程和线程的区别详解
2017/10/29 Python
使用NumPy和pandas对CSV文件进行写操作的实例
2018/06/14 Python
Django 登陆验证码和中间件的实现
2018/08/17 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
给Python学习者的文件读写指南(含基础与进阶)
2020/01/29 Python
为什么说python更适合树莓派编程
2020/07/20 Python
是否有自动比较结构的方法
2015/06/03 面试题
信息工程学院毕业生推荐信
2013/11/05 职场文书
模具专业毕业推荐信
2014/03/08 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
追悼会答谢词
2015/01/05 职场文书
法学专业求职信范文
2015/03/19 职场文书
举起手来观后感
2015/06/09 职场文书
保护环境的宣传语
2015/07/13 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
Python django中如何使用restful框架
2021/06/23 Python