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 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
含有CKEditor的表单如何提交
Jan 09 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
JavaScript设计模式之抽象工厂模式介绍
Dec 28 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
Javascript中的数据类型之旅
Oct 18 Javascript
jQuery事件委托之Safari
Jul 05 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 10 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利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
PHP实现生成推广海报的方法详解
2018/03/14 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
PHP实现文件上传后台处理脚本
2020/03/04 PHP
JS版网站风格切换实例代码
2008/10/06 Javascript
获取body标签的两种方法
2011/10/13 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
js实现PC端根据IP定位当前城市地理位置
2017/02/22 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
[01:26]神话结束了,却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
python判断一个集合是否包含了另外一个集合中所有项的方法
2015/06/30 Python
Python爬取成语接龙类网站
2018/10/19 Python
Python类装饰器实现方法详解
2018/12/21 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
详解appium自动化测试工具(monitor、uiautomatorviewer)
2021/01/27 Python
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
欢送退休感言
2014/02/08 职场文书
餐饮投资计划书
2014/04/25 职场文书
销售员态度差检讨书
2014/10/26 职场文书
保外就医申请书范文
2015/08/06 职场文书
教师读书活动心得体会
2016/01/14 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
Python Pandas 删除列操作
2022/03/16 Python
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python