Opening a computed document using window.open() and data: scheme

问题描述 投票:0回答:1

我有一个在浏览器中运行的网页,它生成一个计算出的 HTML 文档,我想在新的浏览器选项卡中打开该文档。

简单粗暴的方法就是这样做:

const w = window.open('', '_blank');
w.document.open();
w.document.write(htmlContents);
w.document.close();

很简单。但这会产生一些我不喜欢的尴尬后果。即,新选项卡的 URL 必须指向 somewhere,但由于新文档是动态计算的,所以没有地方可以 指向它。如果我没有指定 URL,它会使用我的网页的 URL。因此,如果有人刷新了包含生成文档的选项卡,该文档就会消失,我的网页的一个新实例将加载到它的位置。这会让用户感到困惑。

我认为更适合我的需要的是使用 data URI 代替。我会简单地将我网页的全部内容编码到 URI 本身,然后使用

window.open()
打开该 URI。它很丑陋,但在语义上符合我的目标:一个独立的计算文档,不会因页面刷新而意外导航出。

我为此构建了一个我认为非常简单的概念,如下所示:

const doc = encodeURIComponent('<html><body><p>Hello, world!</p></body></html>');
window.open(`data:text/html;charset=utf-8,${doc}`, '_blank');

如果我运行这段代码,一个新窗口会在我的屏幕上闪烁一帧,然后立即关闭。没有出现错误。

我做错了什么?

javascript window.open data-uri
1个回答
0
投票

显然 所有现代浏览器都明确地故意阻止了这种数据 URI 的使用。精彩。

黑板上的另一个勾号是“我需要的非常完美的东西最近才从我们身边拿走”。呃

从好的方面来说,这似乎可以更好地完成我想要的一切:

const html = '<html><body><p>Hello, world!</p></body></html>';
const blob = new Blob([html], { type: 'text/html'});
const url = URL.createObjectURL(blob);
window.open(url, '_blank');
© www.soinside.com 2019 - 2024. All rights reserved.