logo标签列表

用另一个JavaScript文件编写JavaScript文件

javascriptfile
4

我有两个网页。在第一个页面上，我需要提交一个表单。使用嵌入的 JavaScript 代码从表单中获取值后，我需要生成另一个 JavaScript 文件，并在下一个页面中使用这个生成的 JavaScript 文件。应该如何实现？或者还有更好的方法吗？

你尝试过在 PHP 中提交代码（例如），然后返回这个新 JS 的内容吗？ - wendelbsilva
@wendelbsilva：我想让整个东西在客户端上运行。所以不能使用PHP。 - Ankur Ankan
2
你在这里真正想做什么？最终目标是什么？如果需要，您可以轻松地将GET变量传递到另一个页面。 - Benjamin Gruenbaum
@AnkurAnkan 你可以尝试创建一个新的“script”元素，将属性类型设置为“text/javascript”，然后将生成的JS放入这个新元素中。就像这样。 - wendelbsilva
2
在这种情况下，localStorage 可能是您最好的选择，传递 GET 参数可能不足够。最好采用单页应用程序，这将完全消除您的问题。 - Benjamin Gruenbaum
显示剩余4条评论
3个回答
11

同源？

同源的文档可以始终互相交互。如果一个窗口或框架中的代码可以引用另一个同源窗口或框架，则来自一个执行上下文（窗口或框架...！）的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可能存在一些问题，并且在之前的版本中完全不受支持。

动态加载JavaScript

当你成功建立两者之间的通信渠道，并且简单数据传递已经不足够时，你可以将一个完整的JavaScript代码块传递给另一方，并要求执行该脚本。请参见此stackoverflow问题及相关答案以了解如何在接收端实现这种解决方案。

当然这只是一些短暂的例子，你应该谷歌搜索其余部分。希望它至少能帮助你选择一条路径。

1

您可以使用Blobs来完成您要做的事情。但是，为了在另一个页面上实际运行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

0

在这种情况下，可能的一个选择（我很清楚它并不适合每个人）是采用不那么花哨的方法，将可见页面放入填充视口的 iframe 中，然后让父窗口保存数据。iframe 将从您的页面 1 导航到页面 2，但由于父窗口没有更改，它是一个稳定的存储库，可以容纳您喜欢的任意大小的 JavaScript 数据。鉴于涉及的数据量，这也比您可以使用的任何其他跨窗口通信技术更简单、更高效，并且它将在每个浏览器中工作，一直回溯到 Netscape Navigator（可能！;-)）。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接