我有一個在瀏覽器中運行的網頁，該網頁會產生一個計算的 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粉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');