将大型 JSON 对象传递到新窗口中的另一个页面。

Posted 2023-02-25

【中文标题】将大型 JSON 对象传递到新窗口中的另一个页面。

【英文标题】：Passing large JSON object to another page in a new window.

【发布时间】：2013-08-21 22:22:03

【问题描述】：

如果这个问题已经得到解答，我提前道歉。我已经用谷歌搜索了几个小时，但我仍然没有找到任何似乎可以回答我确切问题的东西。

基本上，我有一个非常复杂/高度风格化的视图，它显示从数据库中提取的特定于用户的数据。我已将数据捕获为 JSON 对象，并使用 .data() 将其附加到我的页面主体。我添加了一个按钮，用于检索 JSON 对象并在新窗口中打开我的打印机友好页面。我希望能够从这个新窗口中访问/操作特定于用户的 JSON 对象。 （这将都在同一个域上。）

我见过的大多数解决方案似乎都围绕着打开一个新的空白窗口。我不想那样做。我已经为页面编写了一个布局，并且我计划让 javascript/css 也可以运行。我已经看到涉及打开一个新窗口然后使用 document.write 的解决方案，如果有一种方法可以针对新页面上的特定元素，那就太好了。我试过了，例如：

x = window.open(url);
x.document.write(myJson);

这确实将 JSON 对象放在新页面上，但完全擦除了布局中的所有其他内容。

我还看到了建议对对象进行字符串化然后进行 Base64 编码的解决方案。但我担心 URL 长度限制，因为他们可能会在单击按钮之前在此页面上收集大量数据。

我还看到了建议使用 html5 本地存储的解决方案。如果没有更好的解决方案，我想我会这样做。但是 HTML5 会引发浏览器兼容性问题，如果可能的话，我宁愿避免它们。

下面是一些示例代码：

JSON 对象：

 

"name":"Percy Pea.",
"bio":"Percy Pea was born in a pod, and lived there happily."
,

"name":"James Cob",
"bio":"James Cob was arrested for stalking."

当它作为“数据”从服务器返回时，我将其捕获：

$("body").data( "userData", data);

在打印友好页面按钮的 onclick 中，我检索了 JSON 对象：

var userData = $("body").data("userData");

那么这可行吗？有没有办法打开一个新窗口，然后将数据插入/附加到其中的特定元素？或者......也许我什至没有考虑过其他方式。

在此先感谢您的帮助，不过，一旦发布，我也会确保勾选答案。

【参考方案1】：

您可以将json保存在父窗口的全局变量中，并在弹出窗口代码中引用它

https://***.com/a/87737/1755374

【讨论】：

哈，你是最棒的。对于偶然发现此页面的其他人，我可以使用以下行： var userData = window.opener.$("body").data("userData");在新窗口中打开的页面的 javascript 文件中。这成功检索了 JSON 对象。