js前端進行同一域名或不同域名下兩個頁面跨域通訊

阿新 • • 發佈：2019-01-13

解決同一域名下和不同域名下的兩個頁面之間進行傳值，可以支援json格式，相容ie8，傳送訊息的postMessage方法支援IE8+,但是在接收訊息的時候，

window.attachEvent方法只支援ie微軟的私有方法，不支援火狐、谷歌等高板本瀏覽器，這是對支援ie8瀏覽器的補充；

所有window.onmessage 方法是對支援符合W3C高版本瀏覽器的情況

主頁面利用iframe指向另一頁面：

一部分：a.html頁面，向b頁面傳送訊息，程式碼如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
//開始畫圖，新增圍欄
function addPolygon() {
var ifr = document.getElementById('iframeRight');
var targetOrigin = '*';
var func = { name: "addPolygon" };//傳輸name名稱
var str = JSON.stringify(func); //將json物件轉成json字串
ifr.contentWindow.postMessage(str, targetOrigin);
}

//重新畫圖
function editPolygon() {
var ifr = document.getElementById('iframeRight');
var targetOrigin = '*';
var func = { name: "iPloygonEdit" };//傳輸name名稱
var str = JSON.stringify(func); //將json物件轉成json字串
ifr.contentWindow.postMessage(str, targetOrigin);
}
</script>
</head>
<body>

<div style="float:left;height:500px;width:100px;">
<input type="button" value="開始畫圖" onclick="addPolygon()" />
<input type="button" value="重新畫圖" onclick="editPolygon()" />
</div>
<div style="float:left;height:500px;width:800px;">
<iframe name="iframeRight" id="iframeRight" style="width:100%;height:500px; border:1px solid #ff6a00;" src="b.html"></iframe>
</div>
</body>
</html>

第二部分：b.html頁面進行接收a頁面傳遞的訊息

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
if (window.attachEvent) {
window.attachEvent('onmessage', function (event) {

var getData = JSON.parse(event.data);//將接收的json字串轉成物件
// 通過origin屬性判斷訊息來源地址
if (getData.name == "addPolygon") {
alert("addPolygon");
}
if (getData.name == "iPloygonEdit") {
alert("iPloygonEdit");
}
});
} else {
window.onmessage = function (event) { //註冊message事件

var getData = JSON.parse(event.data); //將接收的json字串轉成物件
if (getData.name == "addPolygon") {
alert("addPolygon");
}
if (getData.name == "iPloygonEdit") {
alert("iPloygonEdit");
}
}
}

</script>

</head>
<body>
這是B頁面
</body>
</html>

js前端進行同一域名或不同域名下兩個頁面跨域通訊

js前端進行同一域名或不同域名下兩個頁面跨域通訊

JS實現兩個頁面之間的通訊

mget(可以通過索引、型別、或ID一次得到同一索引或不同索引庫裡的文件集合) & mapping

js獲取n分鐘（或n小時或n個月）後（或前）的時間（日期）

Web專案防止同一賬號在不同session下重複登入

JSONP(JS進行跨域通訊)

如何把區域網內不同資料庫的兩個表的資料進行傳輸？

兩個頁面之間通過js進行傳值

部署在同一臺機器的不同應用，兩個應用的cookie會互相影響的問題（如果做了登入攔截，會導致已登入的應用需要重新登入）

兩個頁面相同js方法兼容

Centos6.5調整同一VG下兩個LV空間

用postMessage解決跨域通訊和跨域呼叫js問題

同一主機下兩個虛擬機器之間的訪問

前端跨域通訊的幾種方式

異或運算來實現兩個變數互換

如何在同一臺電腦上同時執行兩個Tomcat(關於Invalid character found in method name.HTTP method names must be token.錯誤資訊)

SQL 不同ip的兩個資料庫資料插入，

C# 面向物件：類、根據不同操作符操作兩個變數

js 限制輸入框的位元組數，中文兩個位元組，英文字母一個位元組

node.js搭建介面（九）：Node-使用中介軟體實現跨域

js前端進行同一域名或不同域名下兩個頁面跨域通訊

相關推薦