Open calculation documents using window.open() and data: scheme
I have a web page that runs in a browser that generates a computed HTML document that I want to open in a new browser tab.
The easy and dirty way is to do this:
const w = window.open('', '_blank');
w.document.open();
w.document.write(htmlContents);
w.document.close();
Very simple. But this has some awkward consequences that I don't like. That is, the new tab's URL must point somewhere, but since the new document is calculated dynamically, there is no to point to it. If I don't specify a URL, it will use the URL of my web page. So if someone refreshes the tab containing the generated document, the document disappears and a new instance of my webpage is loaded in its place. This can confuse users.
I think what suits my needs better is to use data URIs. I simply encode the entire content of the web page into the URI itself, and then open the URI using window.open(). It's ugly, but semantically consistent with my goal: a self-contained computational document that can't be accidentally navigated out on page refreshes.
I constructed a concept for this that I think is very simple, as follows:
const doc = encodeURIComponent('<html><body><p>Hello, world!</p></body></html>');
window.open(`data:text/html;charset=utf-8,${doc}`, '_blank');
If I run this code, a new window flashes on the screen for one frame and then closes immediately. No errors occurred.
What did i do wrong?
