Open HTML files with JavaScript on iPhone and iPad
An Apple Shortcuts workaround to open local HTML files with JavaScript on iOS and iPadOS devices
If you’ve ever tried to open an HTML file with JavaScript on an iPhone or an iPad, you’ve probably noticed that the Preview app doesn’t render it correctly because it lacks JavaScript support. If you’ve tried to open that file in Safari, you’ve discovered that there is simply no “Open File” option. Apple Shortcuts to the rescue!
How to use it
You can open an HTML file from the Share menu or run the shortcut directly. Both methods open the file in Safari.
From the Share menu In Files, touch and hold an HTML file, tap Share, then choose Open HTML file.
From the Shortcuts app Run Open HTML file, then choose the HTML file you want to open.
How it works
The whole shortcut consists of only 3 steps!
The first action receives a file or text through the Share menu. If you run the shortcut directly, it asks for a file.
The second action encodes the file’s contents as Base64 text. Since it encodes content as text, you can select any text and send it to the shortcut through the Share menu. Try it yourself with the following snippet:
<h1>Hello from selected text</h1>
<button onclick="this.textContent = 'It works!'">
Tap me
</button>The third action adds data:text/html;base64, before the encoded text and opens the resulting URL in Safari.
This puts the HTML directly in the URL, so Safari can display the page and run its JavaScript without opening the local file. That’s it!