保存子窗口会保存父窗口（Javascript）

Posted 2023-05-07

【中文标题】保存子窗口会保存父窗口（Javascript）

【英文标题】：Saving a child window saves the parent window instead (Javascript)

【发布时间】：2009-05-24 23:49:48

【问题描述】：

我有一些 javascript 代码可以创建网页的“保存友好”版本。

child = window.open("","child"); child.document.write(htmlPage);

“htmlPage”是页面的基本 html，去掉了所有的 javascript 引用，一组不同的标题图像引用等。

一切都完美地显示在弹出窗口中，没有运行 javascript。 当我单击“文件->另存为”时，保存的文件是父窗口，以及它的所有 javascript，并且没有子窗口的痕迹。有谁知道如何解决这个问题？我只想保存子窗口。

谢谢， -Kraryal

【参考方案1】：

我也有类似的情况（但不愿意完全放弃）。我正在使用 Javascript 构建网页的保存友好版本，我希望用户将其下载为文本文件（在我的情况下为逗号分隔值）。我认为data: URI 可以在这里提供帮助。

//construct the csvOutput in Javascript first
var popup = window.open("data:application/octet-stream," + encodeURIComponent(csvOutput), "child");
//no need to document.write() anything in the child window

在 Firefox 中，这甚至不会弹出窗口，只是询问用户是否要保存文件，并将其保存为 .part 文件。不完全理想，但至少它可以保存文件而不会弹出不必要的窗口。

或者，我们可以使用 text/plain MIME 类型：

//construct the csvOutput in Javascript first
var popup = window.open("data:text/plain;charset=utf-8," + encodeURIComponent(csvOutput), "child");

在 Firefox 中，这确实会弹出一个新窗口，但默认情况下它会保存为 ASCII 文本，没有任何父窗口的繁琐或任何换行。这可能是我将使用的。

看起来这在 IE 中不起作用。 IE 8 是唯一支持data: URI 的版本，并且它有一个series of restrictions 可以使用它。对于 IE，您可以查看 execCommand。

感谢tek-tip thread 和Wikipedia article on the data URI scheme。

【讨论】：

这不会做我想要的，但它仍然是一个很好的发现。 （我想将一堆图像和 html 保存为一个存档文件。） execCommand 看起来也很有用。

【参考方案2】：

当您保存页面时，它将保存原始 URL 内容（例如，就像您下载了新副本一样）

如果您想要一个“清理过的”版本，您需要在服务器上生成该版本，并以该 URL 作为第一个参数打开弹出窗口。

【参考方案3】：

对于仅 Windows/IE 的版本，请参见此处：http://p2p.wrox.com/javascript-how/3193-how-do-you-save-html-page-your-local-hd.html

我知道，很糟糕，但以防万一它像一个仅限 IE 的 Intranet....

【参考方案4】：

唉，看来我没有足够的声誉将 cmets 添加到我的问题中，所以我将在此处添加此内容。

此 javascript 部署用于 Internet Explorer 和 Safari。托管应用程序并不总是可以访问本地文件系统。

用户可以标记他们正在使用的页面，然后将其保存以供以后打印或通过电子邮件发送。我们告诉他们将其保存为单个文件存档，以便它实际上可以是邮件。保存对话框可以做到这一点，用户可以将文件放在他们有权访问的地方，这就是我们使用它的原因。

似乎简单的方法是将新的 html 从 javascript 写入本地目录，但我们不能总是这样做。还有其他想法吗？感谢您迄今为止的帮助。

【讨论】：

谢谢 garrow。那天我的浏览器很笨。