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 相关文章推荐
JQuery团队打造的javascript单元测试工具QUnit介绍
Feb 26 Javascript
jQuery实现的立体文字渐变效果
May 17 Javascript
30个最佳jQuery Lightbox效果插件分享
Apr 11 Javascript
JS的replace方法详细介绍
Nov 09 Javascript
javascript实现json页面分页实例代码
Feb 20 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 Javascript
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
Vue Element校验validate的实例
Sep 21 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
JavaScript中document.activeELement焦点元素介绍
Nov 27 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/06/21 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
HTML5实现留言和回复页面样式
2015/07/22 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
2020/02/28 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
Python中用于返回绝对值的abs()方法
2015/05/14 Python
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
Python编程判断这天是这一年第几天的方法示例
2017/04/18 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
对python判断是否回文数的实例详解
2019/02/08 Python
python版DDOS攻击脚本
2019/06/12 Python
python自动化之Ansible的安装教程
2019/06/13 Python
python字符串Intern机制详解
2019/07/01 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
python多线程使用方法实例详解
2019/12/30 Python
python实现用户名密码校验
2020/03/18 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
简述数据库的设计过程
2015/06/22 面试题
行政人员岗位职责
2013/12/08 职场文书
志愿者宣传口号
2014/06/17 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
单位接收证明格式
2015/06/18 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB