iFrame跨域解决办法

按情境分
1、不跨域时
2、主域相同、子域不同时
3、主域不同
不跨域时
访问iframe： contentWindow
访问父级：parent
访问顶级：top

a.html

<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="b.htm" width="500" height="300" id="iframe"></iframe>

    <script> document.getElementById("test").onclick = function(){ 
　　　　alert(document.getElementById("iframe").contentWindow.document.getElementById("message").value); 
　　}
    </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 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> document.getElementById("test").onclick = function(){ alert(parent.document.getElementById("message").value); } </script>

</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>

   document.domain = "jiaju.com";

   document.getElementByI d("test").onclick = function(){

        alert(document.getElementByI d("iframe").contentWindow.document.getElementByI d("message").value);

    }

</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>

    document.domain = "jiaju.com";

    document.getElementByI d("test").onclick = function(){

        alert(parent.document.getElementByI d("message").value);

    }

</script>

</body>

</html>

两个域都设置：document.domain=‘jiaju.com’

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,

      datas = hash_url.split("#")[1].split("&"),

      data = {};

for(var i = 0;i<datas.length;i++){

    var t = datas[i].split("=");

    data[t[0]] = decodeURIComponent(t[1]);

}

document.domain = "jiaju.com";

switch(data["JJtype"])

    {

        case "height":

            try{top.window.document.getElementByI d(data["iframeID"]).height = data["height"];}catch(e){}

            break

        case "width":

            try{top.window.document.getElementByI d(data["iframeID"]).width = data["width"];}catch(e){}

            break

        case "callback":

            try{top.window[data["fn"]].call(document,data);}catch(e){}

            break

        default:

    }

</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>

    var iframe = document.getElementByI d("iframe")

    document.getElementByI d("test").onclick = function(){

        var url = iframe.src,

        time = (new Date()).getTime();

        if(url.indexOf("message") != -1){

           iframe.src = url.replace(/message=\w+/,"message="+time);

        }else {

            iframe.src = url+"/#message="+time;

        }

    }

</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(){

    hash_url = window.location.hash;

     var  datas = hash_url.split("#")[1].split("&");

    for(var i = 0;i<datas.length;i++){

        var t = datas[i].split("=");

        data[t[0]] = decodeURIComponent(t[1]);

    }

}

function change(){

    if(hash_url!=window.location.hash){

        dealHash();

        document.getElementByI d("message").value = data["message"];

    }

}

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>

    document.domain = "jiaju.com";

    function test(obj){

       alert(obj['message']);

    }

</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="

<script src="/js/crossdomain/crossdomain.js"></script>

这里是B（第二层）iframe<br/>

<div id="div" style="height:200px;color:#fff;">这里高度可以变化</div>

<button id="btn">点击改变高度</button><button id="btn2">点击调用顶层callback</button>

<script>

document.getElementByI d("btn").onclick = function(){

    var div = document.getElementByI d("div");

    div.style.height = (parseInt(div.style.height)+100)+"px";

    JJcrossiframe.setHeight("google");

}

document.getElementByI d("btn2").onclick = function(){

    JJcrossiframe.callback("test",{

        message:"来自跨域的iframe的问候！"

    });

}

</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’)  //自动设定跨域iframe宽度
JJcrossiframe.callback(‘fn’，paramobj)  //调用顶层iframe中fn函数
JJcrossiframe.init(paramobj , type)             //自定义向顶层传参数
//  (type目前有：height,width,callback),
//  新增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跨域解决办法
1.iframe 定义和用法 iframe 元素会创建包含另外一个文档的内联框架(即行内框架). HTML 与 XHTML 之间的差异在 HTML 4.1 Strict DTD 和 XHTML 1. ...
JavaScript跨域解决办法
在找到跨域解决办法之前,我们要先弄清楚一些基本概念什么是跨域? 什么是“同源策略”? 跨文档消息通信 & 跨域请求数据主域相同而子域不同不同域名的跨域访问什么是跨域? 简单地理解就是因 ...
JAVA联调接口跨域解决办法
JAVA联调接口跨域解决办法第一种代码: HttpResponse response = new BasicHttpResponse(HttpVersion.HTTP_1_1,HttpStatus. ...
ajax跨域解决办法
在使用jquery的ajax作请求时,http://127.0.0.1:8080,类似这样的一个本地请求,会产生跨域问题, 解决办法一: jsonp: var url= "http://12 ...
tornado django flask 跨域解决办法（cors）
XMLHttpRequest cannot load http://www.baidu.com. No 'Access-Control-Allow-Origin' header is present ...
javascript 跨域请求详细分析(终极跨域解决办法)
自从我接触前端以来,接手的项目里面很大部分都是前后端分离的,后端只提供接口,前端根据后端接口渲染出实际页面.个人觉得这是一个挺好的模式,前后端各自负责各自的模块,分工明确,而且也给前端更大的发挥空间. ...
JSONP 跨域解决办法
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
黄聪：Access-Control-Allow-Origin，JS跨域解决办法
.htaccess添加下面代码: <IfModule mod_headers.c> Header add Access-Control-Allow-Origin "*" ...
google 跨域解决办法
--args --disable-web-security --user-data-dir

随机推荐

Java 帝国之建造者模式
Java 帝国之建造者模式原创: 王钦誉码农翻身今天本文来自王钦誉的投稿,老刘做了较大修改. 原文地址: https://xiaoqinyu0000.github.io/2018/06/11/ ...
P1886 P2216 单调队列模板
何为单调队列? 单调队列是一个队列(废话) 而且必须同时满足下标单调和值单调两个单调特性. 跟优先队列不同,优先队列直接使用堆(heap)来实现,如何删去特定下标元素?不明. 本人喜欢用单调队列存下标 ...
BZOJ2940 条纹
条纹游戏是一个双人的游戏.所需要的物品有一个棋盘以及三种颜色的长方形条纹,这三种颜色分别是红色.绿色和蓝色.所有的红色条纹的尺寸是c*1,所有的绿色条纹的尺寸是z*1,所有的蓝色条纹的尺寸是n*1,这 ...
@Async的简单用法总结
前言: 在Java应用中,绝大多数情况下都是通过同步的方式来实现交互处理的:但是在处理与第三方系统交互的时候,容易造成响应迟缓的情况,之前大部分都是使用多线程来完成此类任务,其实,在Spring 3 ...
TestNg 7.依赖测试
我本个测试方法执行的时候,依赖于其他的方法.用到关键字dependsOnmethods(依赖于那个方法)也有依赖于哪个组(dependsOnGroups). 看以下的一段代码: package com ...
python学习笔记—Day1
1. python使用<变量名>＝<表达式>的方式对变量进行赋值 a=1; python中数分为整数和浮点数字符串的定义一定要用引号,单引号和双引号是等价的三引号用来输入包 ...
苹果笔记本适合什么人中国Mac电脑用户的8个事实
报告由腾讯 ISUX 研究中心收集了全国 7946 名 Mac 电脑用户的问卷整理而成.并且,参考了苹果公司的历年财报,以及百度.StatCounter 等第三方市场统计数据. 你是 iPhone 用 ...
1053. Path of Equal Weight (30)
Given a non-empty tree with root R, and with weight Wi assigned to each tree node Ti. The weight of ...
Sqlserver中的视图
一.视图的基本知识什么是视图:视图是从一个或多个表导出的虚拟的表,具有普通表的结构,物理上是不存在的.视图是动态的数据的集合,数据是随着基表的更新而更新. 视图的优点: ①在多表查询时,查询方便. ...
Sidetiq 定时任务
class SidekiqCreateMonthPlanWorker #定时自动生成下月计划 include Sidekiq::Worker include Sidetiq::Schedulable ...

iFrame跨域解决办法

iFrame跨域解决办法的更多相关文章

随机推荐

热门专题