首页  >  问答  >  正文

使用 window.open() 和 data 打开计算文档:scheme

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

简单而肮脏的方法是这样做:

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

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

我认为更适合我的需求的是使用数据 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');

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

我做错了什么?

P粉752479467P粉752479467163 天前370

全部回复(1)我来回复

  • P粉085689707

    P粉0856897072024-04-07 09:10:30

    显然所有现代浏览器都已有意明确阻止这种数据 URI 的使用。太棒了。

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

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

    const html = '

    Hello, world!

    '; const blob = new Blob([html], { type: 'text/html'}); const url = URL.createObjectURL(blob); window.open(url, '_blank');

    回复
    0
  • 取消回复