首頁  >  問答  >  主體

使用 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 天前372

全部回覆(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
  • 取消回覆