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 检测浏览器类型和版本的代码
Sep 15 Javascript
JavaScript操纵窗口的方法小结
Jun 28 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
使用jQuery调用XML实现无刷新即时聊天
Aug 07 Javascript
Angular表单验证实例详解
Oct 20 Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
JavaScript 面向对象基础简单示例
Oct 02 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 实现进制转换(二进制、八进制、十六进制)互相转换实现代码
2010/10/22 PHP
注意:php5.4删除了session_unregister函数
2013/08/05 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
php实现的支持imagemagick及gd库两种处理的缩略图生成类
2014/09/23 PHP
教你php如何实现验证码
2016/01/20 PHP
php对微信支付回调处理的方法
2018/08/23 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
jQuery EasyUI之DataGrid使用实例详解
2016/01/04 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
使用PYTHON接收多播数据的代码
2012/03/01 Python
python操作redis的方法
2015/07/07 Python
Python实现两个list求交集,并集,差集的方法示例
2018/08/02 Python
Python 保存矩阵为Excel的实现方法
2019/01/28 Python
python递归法解决棋盘分割问题
2019/07/17 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
python 两种方法删除空文件夹
2020/09/29 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
工作室成员个人发展规划范文
2014/01/24 职场文书
银行职员个人的工作自我评价
2014/02/15 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
PyTorch中permute的使用方法
2022/04/26 Python
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL