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 相关文章推荐
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
javascript判断office版本示例
Apr 11 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
Nov 18 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
jQuery监听文件上传实现进度条效果的方法
Oct 16 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
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中Cannot send session cache limiter 的问题的方法
2007/04/27 PHP
php入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
学习jquery之一
2007/04/27 Javascript
jquery json 实例代码
2010/12/02 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
python判断字符串是否是json格式方法分享
2017/11/07 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
详解python常用命令行选项与环境变量
2020/02/20 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
Python中的With语句的使用及原理
2020/07/29 Python
python如何使用腾讯云发送短信
2020/09/17 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
市场营销专业个人求职信范文
2013/12/14 职场文书
财产保全担保书范文
2014/04/01 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
人事文员岗位职责
2015/02/04 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
小型企业的绩效考核制度模板
2019/11/21 职场文书
MySQL之select、distinct、limit的使用
2021/11/11 MySQL
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏