从另一个 JavaScript 编写 JavaScript 文件答案

【问题标题】：Writing a JavaScript file from another JavaScript从另一个 JavaScript 编写 JavaScript 文件
【发布时间】：2013-08-02 23:44:22
【问题描述】：

我有两个网页。在第一页我必须提交一个表格。使用表单中的值（使用嵌入式 JavaScript 代码），我需要生成另一个 JavaScript 文件并在下一页中使用这个生成的 JavaScript 文件。如何才能做到这一点？或者有更好的方法吗？

【问题讨论】：

你有没有试过提交到PHP中的代码（例如），然后返回这个新JS的内容？
@wendelbsilva：我想让整个事情在客户端工作。所以不能用PHP。
如果你想跨页面传输 JavaScript 数据而不做服务器端的事情，请查看 localStorage 和 sessionStorage developer.mozilla.org/en-US/docs/Web/Guide/DOM/Storage
你真的想在这里做什么？最终目标是什么？如果需要，您可以轻松地将 GET 变量传递到另一个页面。
在这种情况下，localStorage 可能是您最好的选择，传递 GET 参数可能还不够。可能会为单页应用程序拍摄，尽管这会完全消除您的问题。

标签： javascript file

【解决方案1】：

对于这样的情况（我很清楚它并不适合所有人），一个可能的选择是走不那么花哨的路线，并将可见页面放入填充视口的 iframe；然后让父窗口保留数据。 iframe 将从您的第 1 页导航到第 2 页，但由于父窗口不会更改，因此它是一个稳定的存储库，可存储任意多 MB 的 javascript 数据。考虑到所涉及的数据量，这也将比您可以使用的任何其他跨窗口通信技术更简单、更有效，并且它可以在每个浏览器中一直运行到 Netscape Navigator（可能！; -))。

或者对于相关解决方案，在 iframe 中显示第 2 页，然后再次插入第 1 页，填充屏幕并覆盖现有内容。由于第 1 页仍然存在并且可以与 iframe 共享数据，因此您再次没有问题。

【讨论】：

【解决方案2】：

同源？

始终允许同一来源的文档相互交互。如果一个窗口或框架中的代码可以引用另一个窗口或框架，并且它们具有相同的来源，则一个执行上下文（窗口或框架......！）中的 JavaScript 可以与另一个执行上下文交互。当您调用window.open() 时，您会得到一个对外部Window 对象的引用作为返回值！因此，使用该引用在该窗口上设置您想要的任何变量或根据需要加载新脚本。

跨文档消息传递

如果文档的来源不同，或者您没有对其他执行上下文的引用，那么您必须使用 HTML5 中引入的新 API。它被称为“postMessage API”，并且得到了令人惊讶的良好支持。连 IE 8 都支持！

您可以通过以下简单方法检查浏览器是否支持此功能：

if (typeof window.postMessage !== undefined)
    console.log("postMessage API is supported!");

以下是如何向虚拟收件人发送 hello world 文本的示例：

window.postMessage("Hello world", "www.dummy.com");

以下是在其他地方托管的另一个 JavaScript 中监听此类消息的方法：

window.addEventListener("message", function(event) {
    if (event.origin === "www.dummy.com")
        console.log("Received message: " + event.data);
    }, true);

IE11 可能有一些issues 与此，在以前的版本中根本不支持。

动态加载 JavaScript

只要您成功地在两者之间建立了通信通道，并且传递简单的数据还不够，那么您始终可以将完整的 JavaScript 传递给对方并让他执行该脚本。请参阅thisstackoverflow 问题和他的相关答案，了解更多如何在接收端实施这样的解决方案。

当然，这些只是一些简短的例子，其余的你应该用谷歌搜索。希望它至少可以帮助您找到一条道路。

【讨论】：

【解决方案3】：

您可以使用 Blob 来做您想做的事情。但是，为了在另一个页面上实际运行 JavaScript，您还需要该页面的 HTML。

一个不太干净但有效的例子......

var script = function callme(){alert('hi!');};
var html = '<!DOCTYPE html><html><head><script type="text/javascript">'+script.toString()+'</script><body><a onclick="callme();return false;" href="javascript:void(0);">Click me!</a></body></html>';
window.open(URL.createObjectURL(new Blob([html],{type:'text\/html'})));

但它仅适用于较新的浏览器，例如 Chrome 20+、Firefox 13+、IE 10+ 和 Safari 6+。更多关于 Blob 的信息：https://developer.mozilla.org/en-US/docs/Web/API/Blob

【讨论】：