我有一個在瀏覽器中運行的網頁,該網頁會產生一個計算的 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');
如果我運行此程式碼,一個新視窗會在螢幕上閃爍一幀,然後立即關閉。沒有出現錯誤。
我做錯了什麼?
顯然所有現代瀏覽器都已有意明確阻止這種資料 URI 的使用。太棒了。
黑板上的另一個勾號是「我需要的非常完美的東西最近被從我們身邊拿走了」。呃。
從好的方面來說,這似乎可以更好地完成我想要的一切: