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 相关文章推荐
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 Javascript
AngulaJS路由 ui-router 传参实例
Apr 28 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
Angular请求防抖处理第一次请求失效问题
May 17 Javascript
微信小程序开发技巧汇总
Jul 15 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 Javascript
Vue实现简单计算器
Jan 20 Vue.js
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中mail函数发送邮件失败的解决方法
2014/12/24 PHP
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
JavaScript数据类型学习笔记分享
2016/09/01 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
2017/03/23 jQuery
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
使用Require.js封装原生js轮播图的实现代码
2017/06/15 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
js实现踩五彩块游戏
2020/02/08 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
老生常谈python之鸭子类和多态
2017/06/13 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
在keras里实现自定义上采样层
2020/06/28 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
HTML5里autofocus自动聚焦属性使用介绍
2016/06/22 HTML / CSS
Paradigit比利时电脑卖场:购买笔记本、电脑、平板和外围设备
2016/11/28 全球购物
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
美国家庭鞋店:Shoe Sensation
2019/09/27 全球购物
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
日语专业毕业生求职信
2013/12/04 职场文书
基层工作经历证明
2014/01/13 职场文书
全国道德模范事迹
2014/02/01 职场文书
运动会通讯稿200字
2014/02/16 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
大学辅导员述职报告
2015/01/10 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL