Question

我陷入了一个问题，我必须从弹出窗口重定向到另一个域并向其发布消息。这是场景：-

用户打开一个位于相同域的新弹出窗口。（例如：http://doamin_one.com）
用户在弹出窗口中填写表格，然后单击“提交”。这应该将窗口重定向到http://doamin_two.com，domain_two.com应该通过发布消息接收表单数据。

如果我打开新的弹出窗口并发布消息，则能够接收消息，但在重定向的情况下却不能。这是我的代码：

   function redirect(formData,popup) {
     //popup=window ref object
     popup.location.href="http://domain_two.com"
     popup.postMessage(JSON.stringify(formData),
          "http://domain_two.com");
}

http://domain_two.com-

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event)
{
 if (event.origin !== "http://domain_one.com")
      return;
 let data=event.data;
 //....
}

Answer 1

问题代码的一个问题是，在.postMessage()上设置了新的.location.href之后立即调用popup，而不必等待{{1 }}，

load

要获得预期的结果，您可以从原始window（'index.html'）控制该过程。每个popup.location.href="http://domain_two.com" popup.postMessage(JSON.stringify(formData), "http://domain_two.com");都设置为唯一值。在window处提交window.name时，可以将生成的<form>转换为"http://domain_one.com"并传输到FormData，然后传输到ArrayBuffer（{{ 1}}）index.html设置为popup。在a.html location.href的{{1}}事件中，"http://domain_two.com"到load的{{1}}。然后将b.html传递到.postMessage()，其中name获取最初在window提交的index.html。

（FormData检查可能需要在下面的代码中进行调整。该代码已在plnkr上进行了测试，在该代码中，跨域消息传递的模拟不是1：1，尽管应该提供一种实现方法要求）。

index.html（.postMessage()）

b.html

a.html（FormData，b.html）

origin

b.html（opener，<!DOCTYPE html> <html> <head> </head> <body> <script> // open `popup` const popup = window.open('a.html'); // create random values to assign to `name` at `a.html` and `b.html` const [firstName, lastName] = [...Array(2)].map(_ => new Uint32Array(16)); [firstName, lastName].forEach(buffer => window.crypto.getRandomValues(buffer)); const [decoder, encoder] = [new TextDecoder(), new TextEncoder()]; const [first, last] = [firstName, lastName].map(buffer => decoder.decode(buffer)); // set `name` of `popup` (`a.html`) to `first` popup.name = first; let data; window.addEventListener("message", e => { // check `name` of `source` if (e.source.name === first) { console.log(e.source.name); // store `formData` data = decoder.decode(e.data); console.log(e, JSON.parse(decoder.decode(e.data))); // set `name` of `popup` to `last` popup.name = last; // redirect `popup` to `b.html` popup.location.href = "b.html"; } // check if `name` of `source` (`b.html`) is `last` if (e.source.name === last) { // encode the stored `formData` let curr = encoder.encode(data); console.log(e.source.name, e.data); // transfer `formData` to `b.html` e.source.postMessage(curr.buffer, e.source.location.href, [curr.buffer]); // data = void 0; } }) </script> </body> </html>）

popup

plnkr

Answer 2

您可以使用查询字符串参数将表单数据传递到"http://domain_two.com"，然后在第二个域的location.href事件中解析load的查询字符串

popup.location.href = `http://domain_two.com?${new URLSearchParams(formData.entries()).toString()}`

重定向弹出窗口并发布消息

2 个答案: