iFrame跨域解决办法
来源:互联网 发布:java 短链接 编辑:程序博客网 时间:2024/05/17 23:51
1、不跨域时
2、主域相同、子域不同时
3、主域不同
不跨域时
访问iframe: contentWindow
访问父级:parent
访问顶级:top
a.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
</body>
</html>
b.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<body>
</body>
</html>
跨域时
1、主域相同、子域不同
使用document.domain=主域名
a.html (http://a.xxx.com/js/crossdomain/demo/a.htm)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A</title>
</head>
<body>
<textarea id="message">这是高层的密码!</textarea><br/>
<button id="test">看看员工在说什么</button><br/><br/><br/>员工们:<br/>
<iframe src="http://b.xxx.com/js/crossdomain/demo/b.htm" width="500" height="300" id="iframe"></iframe>
<script>
</body>
</html>
b.html ((http://b.xxx.com/com/js/crossdomain/demo/b.htm ))
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JSONP方式</title>
<script type="text/javascript" src="/js/jquery-1.5.1.min.js"></script>
</head>
<body>
<textarea id="message">这是员工的密码!</textarea><br/>
<button id="test">看看领导在说什么</button><br/>
<script>
</body>
</html>
2、主域不同
解决办法:
1、location.hash
2、window.name
location.hash
location.hash 是什么:
hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)
http://www.xxx.com/js/crossdomain/proxy.html#iframeID=google&height=362&JJtype=height
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jiaju.com iframe proxy</title>
</head>
<body>
<script>
var hash_url = window.location.hash,
for(var i = 0;i<datas.length;i++){
}
document.domain = "jiaju.com";
switch(data["JJtype"])
</script>
</body>
</html>
例子
location.hash(A操作B)
A通过location.hash方式传递参数给B,B通过定时器检测hash变化,执行对应操作。
a.html(http://www.aaa.com/demo/cross/iframe03/a.htm)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A</title>
</head>
<body>
<textarea id="message">这是高层的密码!</textarea><br/>
<button id="test">看看员工在说什么</button><br/><br/><br/>员工们:<br/>
<iframe src="http://www.bbb.com/demo/cross/iframe03/b.htm#message=111" width="500" height="300" id="iframe"></iframe>
<script>
</body>
</html>
b.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JSONP方式</title>
<script src="/js/crossdomain/crossdomain.js"></script>
</head>
<body>
<textarea id="message">这是员工的密码!</textarea><br/>
<button id="test">看看领导在说什么</button><br/>
<script>
var data = {};
var hash_url;
function dealHash(){
}
function change(){
}
setInterval(change,100);
</script>
</body>
</html>
location.hash(B操作A)
A创建和上层同域的iframe通过location.hash方式传递参数给B ,B通过top.window获取顶层window对象A
a.html(http://www.aaa.com/demo/cross/iframe03/a.htm)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A</title>
<script>
</head>
<body>
这里是A(第一层)<br/>
<iframe id="google" src="http://www.bbb.com/demo/crossiframe/b.html" width="1000" height="300" border=1></iframe>
</body>
</html>
b.html(http://www.bbb.com/demo/crossiframe/b.html)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>B</title>
</head>
<body style="background-color:#e5e5e5">
<script src="/js/crossdomain/crossdomain.js"></script>
这里是B(第二层)iframe<br/>
<div id="div" style="height:200px;background-color:blue;color:#fff;">这里高度可以变化</div>
<button id="btn">点击改变高度</button><button id="btn2">点击调用顶层callback</button>
<script>
document.getElementByI d("btn").onclick = function(){
}
document.getElementByI d("btn2").onclick = function(){
}
</script>
</body>
</html>
location.hash原理:
1、动态改变location.hash,iframe不会重载
2、无论跨域与否,iframe内可以获取自己的location.hash
3、只要域名相同就能通信,即使ABC三层嵌套
location.hash通用解决办法:
被嵌入的跨域的iframe中引入
<script src="/js/crossdomain/crossdomain.js"></script>
提供以下方法:
JJcrossiframe.setHeight(‘youiframeID’) //自动设定跨域iframe高度
JJcrossiframe.setWidth(‘youiframeID’)
JJcrossiframe.callback(‘fn’,paramobj)
JJcrossiframe.init(paramobj , type)
//
//
location.hash缺点
1、传递数据量有限
2、不太安全
window.name
window.name 是什么:
name 在浏览器环境中是一个全局window对象的属性
当在 iframe 中加载新页面时,name 的属性值依旧保持不变
name 属性仅对相同域名的 iframe 可访问
window.name 的优势:
数据量更大(2M)
更安全
可传递多种数据格式
window.name 的劣势:
只适用于隐藏iframe的情形
国内起源:
怿飞博客: http://www.planabc.net/2008/09/01/window_name_transport/
张克军的例子
http://hikejun.com/demo/windowname/demo_windowname.html
原理(1) :
A创建iFrame B,把要传递的数据放入window.name
- iFrame跨域解决办法
- iFrame跨域解决办法
- iFrame跨域解决办法
- iFrame跨域解决办法
- IE iframe 跨域问题的解决办法
- PHP在iframe 中session跨域丢失的解决办法
- Html中iframe跨域调用js函数解决办法
- iframe跨域访问与传值的个人解决办法
- php使用iframe跨域请求,session丢失解决办法
- iframe跨域与session失效问题的解决办法
- iframe自适应、iframe跨域自适应
- iframe跨域引用其他url造成拒绝访问的解决办法
- 在IE浏览器中iframe跨域访问cookie/session丢失的解决办法
- iframe透明的解决办法
- iframe透明的解决办法
- iframe透明的解决办法
- selenium遇到iframe解决办法
- iframe 跨域自适应
- App开发日报 2015-04-10
- 关于单例模式的几种实现
- servlet实现图片预览、文件上传下载(转载)
- VS2010+VMWare 远程调试exe程序的配置总结
- 【leetcode with java】1 Two Sum
- iFrame跨域解决办法
- MCU程序设计之如何使用标准C函数
- IO - 同步,异步,阻塞,非阻塞 (亡羊补牢篇)
- JAVA 计算两个日期相差的天数
- 分治策略实验报告补充示例 汉诺塔实现
- 十九、Linux系统编程-信号(六)三种不同精度的睡眠sleep、usleep、nanosleep
- ListView 中 item的事件处理
- Remove Duplicates from Sorted Array
- 螺旋洗砂机魅力在哪?