亚洲最大看欧美片,亚洲图揄拍自拍另类图片,欧美精品v国产精品v呦,日本在线精品视频免费

  • 站長資訊網(wǎng)
    最全最豐富的資訊網(wǎng)站

    HTML5中利用postMessage實現(xiàn)Ajax中的POST跨域

    HTML5中提供了在網(wǎng)頁文檔之間相互接收與發(fā)送信息的功能。使用這個功能,只要獲取到網(wǎng)頁所在窗口對象的實例,不僅僅同源(域+端口號)的web網(wǎng)頁之間可以互相通信,甚至可以實現(xiàn)跨域通信。

    瀏覽器支持程度:IE8+,firefox4+,chrome8+ opera10+

    1. 首先,要想接收從其他的窗口發(fā)過來的消息,就必須對窗口對象的message事件進行監(jiān)聽,如下代碼:

    window.addEventListener(“message”, function(){},false);

    2. 其次,需要使用window對象的postMessage方法向其他窗口發(fā)送消息,該方法定義如下所示:

    otherWindow.postMessage(message, targetOrigin);

    該方法使用2個參數(shù),第一個參數(shù)為所發(fā)送的消息文本,但也可以是任何javascript對象,第二個參數(shù)是接收消息的對象窗口的url地址(比如:http:127.0.0.1:8080/) , 但是我們也可以在url地址字符串中使用通配符”*”, 指定全部的域下,但是我們還是建議使用特定的域名下,otherWindow為要發(fā)送窗口對象的引用。

    Demo演示:

    假如現(xiàn)在我在hosts文件下 ,綁定2 個域名如下:

    127.0.0.1 abc.example.com

    127.0.0.1 longen.example.com

    現(xiàn)在假如在abc.example.com域下有一個abc.html頁面,在longen.example.com域下有def.html頁面,現(xiàn)在我是希望這2個不同域名下的頁面能互相通信,abc.html代碼如下:

    <form>          <p>            <label for="message" style="color:red;font-size:24px;">給iframe子窗口發(fā)一個信息:</label>            <input type="text" name="message" value="send" id="message" />            <input type="submit" value="submit" id="submit"/>          </p>    </form>    <h4>目標iframe傳來的信息:</h4>    <p id="test">暫無信息</p>      <iframe id="iframe"        src="http://longen.example.com/webSocket/def.html" style="display:none"></iframe>

    JS代碼如下:

    var win = document.getElementById("iframe").contentWindow;    document.getElementById("submit").onclick = function(e){      e.preventDefault();      win.postMessage(document.getElementById("message").value,"http://longen.example.com");   }      window.addEventListener("message",function(e){       e.preventDefault();       document.getElementById("test").innerHTML = "從" + e.origin + "那里傳過來的消息:n" + e.data;  },false);

    Def.html代碼如下:

    HTML代碼:

    <form>          <p>            <label for="message">給父窗口abc.html發(fā)個信息:</label>            <input type="text" name="message" value="send" id="message" />            <input type="submit" />          </p>     </form>     <p id="test2">暫無信息。</p>

    JS代碼如下:

    var parentwin = window.parent;   window.addEventListener("message",function(e){         document.getElementById("test2").innerHTML = "從父窗口傳來的域" +e.origin + ",和內(nèi)容數(shù)據(jù):" + e.data;           parentwin.postMessage('HI!你給我發(fā)了"<span>'+e.data+'"</span>。',"http://abc.example.com");  },false);

    當(dāng)我點擊abc.html頁面后,可以看到效果如下,從def.html返回內(nèi)容了。如下:

    HTML5中利用postMessage實現(xiàn)Ajax中的POST跨域

    我們需要知道如下幾條信息:

    1. 通過對window對象的message事件進行監(jiān)聽,可以接收消息。

    2. 通過訪問message事件的origin屬性,可以獲取消息的發(fā)送源。

    3. 通過訪問message事件的data屬性,可以取得消息內(nèi)容。

    4. 使用postMessage方法發(fā)送消息。

    5. 通過訪問message事件的source屬性,可以獲取消息發(fā)送源的窗口對象(準確的說,應(yīng)該是窗口的代理對象)。

    有了上面的基本知識點,我們可以延伸為實現(xiàn)ajax POST跨域的問題。

    二:使用postMessage 知識點解決 ajax中POST跨域問題。

    原理:原理也很簡單,假如我們的域名abc.example.com下的abc.html頁面需要發(fā)ajax請求(跨域,域名為longen.example.com)下,那么我們還是先跨頁面文檔的形式,和上面一樣,我們可以現(xiàn)在longen.example.com下 建立一個頁面,比如叫def.html. 那么我們現(xiàn)在還是在 abc.html 頁面嵌入一個隱藏域iframe src路徑指向longen.example.com域下def,html頁面。過程還是和跨文檔類似,只是現(xiàn)在在def.html頁面中 在window.onmessage 事件內(nèi)寫ajax請求即可,如下代碼:

    abc.example.com下的abc.html頁面如下:

    html代碼和上面一樣,下面是JS代碼:

    var win = document.getElementById("iframe").contentWindow;    document.getElementById("submit").onclick = function(e){        e.preventDefault();        win.postMessage(document.getElementById("message").value,"http://longen.example.com/");   }      window.addEventListener("message",function(e){      e.preventDefault();      alert(typeof e.data)      var json = JSON.parse(e.data);       console.log(json);      alert(json.url)  },false);

    def.html代碼如下:

    JS代碼如下:

    //獲取跨域數(shù)據(jù)    window.onmessage = function(e){         $.ajax({            url: 'http://longen.example.com/webSocket/test.php',            type:'POST',            dataType:'text',            //data: {msg:e.data},            success: function(res) {                 var parentwin = window.parent;                   parentwin.postMessage(res,"http://abc.example.com");//跨域發(fā)送數(shù)據(jù)              }        });   };

    test.php代碼如下:

    <?php       $data=array(         url =>1,        name =>'2',        'xx-xx'=>"xx"   );   echo json_encode($data);  ?>

    如上實現(xiàn)方式 就可以實現(xiàn)ajax post跨域了。

    贊(0)
    分享到: 更多 (0)
    網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號