Html 使用 javascript 将数据传递到新窗口答案

【问题标题】：Html pass data to new window using javascriptHtml 使用 javascript 将数据传递到新窗口
【发布时间】：2020-07-16 11:27:34
【问题描述】：

我需要将一些 JavaScript 对象传递给打开的新窗口。当我在新标签页中打开页面时，下面的代码可以正常工作。

              var url = "http://page1.html";
              var win = window.open(url, "_blank");
              win.myData = myData;
              win.focus();

我可以使用

访问 page1.html 上的数据

            var data = window.opener.myData;

但是如果在同一个标签页中使用

              var win = window.open(url, "_self");

此方法无效。我在第二页收到TypeError: Cannot read property 'myData' of null。

如何在同一标签中打开新页面时传递数据。

【问题讨论】：

您将不得不使用localStorage 之类的东西来做到这一点。
试试window.self.myData
这能回答你的问题吗？ Javascript: sharing data between tabs
谢谢，我会检查的。
你可以使用localStorage（如上所述）、cookies、查询字符串。看这个问题，有很多解释：stackoverflow.com/questions/29986657/…

标签： javascript html

【解决方案1】：

按照 cmets 的建议，您可以使用一种持久存储形式，例如 cookie 或 localStorage。然而，这些可能会被用户通过浏览器设置阻止/禁用。

将您的数据作为附加到 url 的 query parameter 传递似乎是最直接和可靠的选择。关于这种方法有一些考虑，例如 url 的最大允许长度；和隐私 - url 将存储在浏览器历史记录中，由 ISP 等记录。

数据还需要采用 url 安全格式。您可以为此使用encodeUriComponent，可能会事先将其编码为base64字符串，以避免在url中包含明文数据。

var data = {
    thing: 'something here',
    otherThing: [{ name: 'zoo', size: 1 }, { name: 'far', size: 9001 }]
};

var dataString = JSON.stringify(data);
var dataStringBase64 = window.btoa(dataString); // (optional)
var dataStringBase64Safe = encodeURIComponent(dataStringBase64);

var url = 'https://example.com?data=' + dataStringBase64Safe;
window.open(url, '_self');

在新页面上（获取所需的查询参数，然后反转步骤）：

var urlParams = new URLSearchParams(window.location.search); // supported on most modern browsers
var dataStringBase64Safe = urlParams.get('data');

var dataStringBase64 = decodeURIComponent(dataStringBase64Safe);
var dataString = window.atob(dataStringBase64);
var data = JSON.parse(dataString);
console.log(data);

【讨论】：

【解决方案2】：

如何使用带有 base64 编码数据的数据 URL，

例如：

var string = JSON.stringify({
name: "x",
age: 23
});

// Encode the String
var encodedString = btoa(string);
console.log(encodedString);

// Decode the String
var decodedString = atob(encodedString);
console.log(decodedString); // Outputs:  "{"name":"x","age":23}"

这样您甚至可以发送图像 How to decode data:image/png:base64... to a real image using javascript

Read on Data Urls

【讨论】：