情境問題
請教各位前輩，ajax有没有可能做到以下的傳值情況：
（一）先於瀏覽器開啟兩個視窗，一個執行A.php，一個執行B.php
（二）於A.php click一個按鈕後，利用ajax post一個json值給B.php
（三）B.php在不重新執行的情況下，能接收此JSON值，並於網頁上呈現
解決方法
單純看兩個視窗互傳值的話
可以用 postMessage
不過有一些限制就是
不是隨便兩個視窗都能互傳
給個範例
a.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| <!DOCTYPE html>
<html>
<head>
<title>A</title>
</head>
<body>
<div class = "box">
<button type = "button" id = "newWindow">開新視窗</button>
<textarea id = "toSay"></textarea>
<button id = "sendText">送出文字</button>
<button id = "sendJson">送出json</button>
</div>
</body>
<script>
const newWindowBtn = document.getElementById('newWindow');
const sendTextBtn = document.getElementById('sendText');
const sendJsonBtn = document.getElementById('sendJson');
let targetWindow = null;
newWindowBtn.addEventListener('click', () => {
targetWindow = open('./b.html');
});
sendTextBtn.addEventListener('click', () => {
const toSayText = document.getElementById('toSay').value;
if (targetWindow) {
targetWindow.postMessage(toSayText, '*');
} else {
alert('請先開新視窗');
}
});
sendJsonBtn.addEventListener('click', () => {
if (targetWindow) {
targetWindow.postMessage({ name1: 'apple', name2: 'banana' }, '*');
} else {
alert('請先開新視窗');
}
});
</script>
</html>
<style>
.box{
display: flex;
justify-content: center;
justify-items: center;
}
</style>
|
b.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <!DOCTYPE html>
<html>
<head>
<title>B</title>
</head>
<script>
window.addEventListener('message', (msg) => {
let node = document.createElement('p');
node.textContent = `${new Date()} : ${JSON.stringify(msg.data)}`;
document.getElementById('receiveDiv').append(node)
});
</script>
<body>
<div id = "receiveDiv"></div>
</body>
</html>
|
result
透過 a.html 開啟 b.html
就能從 a 傳到 b
也能 b 傳到 a (用 window.opener.postMessage())
如果b.php 是想要取得a.php執行更新後的資料的話
大部分的情況應該還是用websocket等那些方法