我有一個在瀏覽器中運行的網(wǎng)頁，該網(wǎng)頁會產(chǎn)生一個計算的 HTML 文檔，我想在新的瀏覽器標籤中開啟該文檔。
簡單而骯髒的方法就是這樣做：
const w = window.open('', '_blank');
w.document.open();
w.document.write(htmlContents);
w.document.close();
很簡單。但這會帶來一些我不喜歡的尷尬後果。也就是說，新選項卡的 URL 必須指向某個地方，但由於新文件是動態(tài)計算的，因此沒有可以指向它。如果我沒有指定 URL，它將使用我的網(wǎng)頁的 URL。因此，如果有人刷新包含產(chǎn)生文件的選項卡，該文件就會消失，並在其位置載入我的網(wǎng)頁的新實例。這會讓使用者感到困惑。
我認為更適合我的需求的是使用資料 URI。我只需將網(wǎng)頁的全部內(nèi)容編碼到 URI 本身中，然後使用 window.open() 開啟該 URI。它很醜陋，但在語義上與我的目標一致：一個獨立的計算文檔，不會因頁面刷新而意外被導航出去。
我為此建構(gòu)了一個我認為非常簡單的概念，如下所示：
const doc = encodeURIComponent('<html><body><p>Hello, world!</p></body></html>');
window.open(`data:text/html;charset=utf-8,${doc}`, '_blank');
如果我運行此程式碼，一個新視窗會在螢?zāi)簧祥W爍一幀，然後立即關(guān)閉。沒有出現(xiàn)錯誤。
我做錯了什麼？
1
0
0
顯然所有現(xiàn)代瀏覽器都已有意明確阻止這種資料 URI 的使用。太棒了。
黑板上的另一個勾號是「我需要的非常完美的東西最近被從我們身邊拿走了」。呃。
從好的方面來說，這似乎可以更好地完成我想要的一切：
const html = 'Hello, world!
'; const blob = new Blob([html], { type: 'text/html'}); const url = URL.createObjectURL(blob); window.open(url, '_blank');
