通過 iframe 和 location.hash 進行跨域通信

 

javascript 中 location.hash 是指   www.aa.com/a.php#abc 中的#abc。

在本試驗中,在局域網中用兩臺Windows 機器分別搭建了PHP的簡單系統。通過設置 hosts 文件,使得A機器的系統網址爲www.sso.com/SSO     B機器系統網址爲www.javascript.com/SSO 

本實驗模擬的是 A 中通過IFrame將 B嵌入進來。然後A 每5秒鐘查看A的hash值,並將hash值顯示在A的頁面中。

B頁面在加載時就查看B的hash值,並根據hash值做出相應的動作。

總的交互過程爲:

   1. A 將B帶有Hash值爲 first的頁面嵌入到Iframe中

    2. B根據自己的Hash值去改變A的hash值

    3. A又將A的hash值進行顯示。

    4. A 點擊按鈕,將B的hash值改成 second.

    5. B發現B的hash值爲Second,就調用callback2 函數,將A的hash值改成third

 

其中A通過setInterval(checkHash(), time) 函數進行定時查看A的hash值,並在checkHash中進行相關操作。在本實驗中,checkHash將A的hash值進行顯示。

A 的代碼如下:


<html>
   <h1>通過IFRAME 和 location.hash 進行javasript 跨域</h1>
   <label id="label">ss</label>
   <iframe id="iframe"></iframe>
   <input type="button" onClick="changeValue()"/>
  <script>
  var iframe = document.getElementById('iframe');
  
   startRequest();
   setInterval(checkHash,5000);
 
 
    function changeValue(){
        iframe.src='http://www.javascript.com/SSO/index.php#second';
 }
 
  function startRequest(){
 
      iframe.src='http://www.javascript.com/SSO/index.php#first';
  } 
 
  function checkHash(){
     var hash = location.hash?location.hash.substring(1):'';
     var label = document.getElementById('label');
     label.innerHTML += hash;
  }
 
</script>

</html>

 

 

B 頁面代碼:

 

<html>
 <script>
    setInterval(checkHash, 10000);
    function checkHash(){
  switch(location.hash){
   case '#first':callback();
    break;
   case '#second':callback2();
    break;
  }
 }
 
 function callback(){
     alert('callback_one');
  try{
   parent.location.hash='second';
  } catch(e){
     var iframeProxy = document.createElement('iframe');
    iframe='http://www.SSO.com/SSO/proxy.php#second';
     document.body.append(iframe);
   
  }
 }
 
 function callback2(){
  alert('callback_two');
  parent.location.hash='third';
  
 }
 </script>
</html>

 

在B的callback函數中,將位於  A域名下的proxy.php 頁面嵌入到B的iframe中,並通過設置proxy.php 的Hash值,然後在proxy.php中將A的Hash值設置爲和proxy.php一樣的Hash值。proxy.php 在這裏作爲橋樑來改變 A的hash值。

通過測試,在Firefox 下不需要使用該proxy.php 作爲橋樑,直接在B頁面中通過parent.location.hash = 'XXX' 就可以改變B的父頁面,也就是A頁面的Hash值

但在 chrome 和 IE 下則需要使用 proxy.php

 

proxy.php 頁面代碼很簡單:

<html>
 <script>
 parent.parent.location.hash = self.location.hash.substring(1);
 
 </script>
</html>

 

 

 

其中parent.parent  就是A頁面的window 對象

self是指proxy.php 本身的window對象

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章