Search code examples
javascriptiosmodulesafari

iOS 16 Safari (and Chrome) not running iframe JS when type="module"


Everything is working flawlessly on desktop and Android Chrome and FF.

I can confirm that on the iphone iOS 16.1 I am using Safari script and script type="module" code and pages loaded from the same domain works on a very basic test site. However, when I use the following code:

var toto = document.createElement("p");
toto.innerHTML = "Hello world";
document.body.appendChild(toto);

In a script in an iframe on my main site (everything from the same domain via https), this code only works when the script is NOT type="module". Without that it works, with that it appears to simply ignore it completely. I am at a loss - I could understand if there was some security setting I had that was blocking it but it works fine on the basic site. What am I missing?


Solution

  • It turns out this appears to be due to the iframe's content's Content-Type. As Chrome and FF show no difference in behaviour, I was only testing with a single situation where the iframe contents was application/xhtml+xml. On other examples, Safari was actually working fine. When I changed the content type from application/xhtml+xml to text/html; charset=utf-8, everything started working.

    And of course, this turns out to be documented...

    Module scripts do not load when the page is served as XHTML (application/xhtml+xml).
    

    (only applies to Safari, others work fine)