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