iFrame跨域解決辦法

時間  2019-11-22
標籤 iframe 解決辦法 欄目 HTML 简体版
原文   原文鏈接

按情境分
一、不跨域時
二、主域相同、子域不一樣時
三、主域不一樣
不跨域時
訪問iframe： contentWindow
訪問父級：parent
訪問頂級：top
javascript

 a.html 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 java

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

 



跨域時

一、主域相同、子域不一樣
使用document.domain=主域名

a.html (http://a.xxx.com/js/crossdomain/demo/a.htm)jquery

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

二、主域不一樣
解決辦法：
一、location.hash
二、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.htmldom

<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)ui

<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原理：
一、動態改變location.hash，iframe不會重載
二、不管跨域與否，iframe內能夠獲取本身的location.hash
三、只要域名相同就能通訊，即便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缺點
一、傳遞數據量有限
二、不太安全



window.namewindow.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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程