Script in separate template

Rork

Hello,
I have a template as an external HTML file, containing a <script>.
The script is executed in Chrome but not in Firefox. Is it a bug?
Thanks.

Fran Diox

@Rork I think there is a bug in Firefox itself that doesn’t allow running this script. I’d recommend using lifecycle events if you need to support Firefox for PWA or anything like that. The hooks are fine for hybrid apps since you only need to worry about Safari and Chrome (which are the supported browsers in Onsen UI). I’ll add a note about this in the guide :+1:

Rork

Too bad… Putting the script in the relevant file would be better for the app design (encapsulation). If you know the Firefox bug reference, I’m interested.

Fran Diox

@Rork I couldn’t find information about this issue on Firefox but I think the following code doesn’t work on Firefox:

var doc = document.implementation.createHTMLDocument();
doc.write('<div id="test"></div>');
doc.close();
doc.getElementById('test');

In Chrome and Safari this code returns the element correctly but Firefox doesn’t create it and returns null. This is used to create <template> that come from separate files :/
Chrome also works properly with document.importNode (unlike Safari and Firefox).
Unfortunately, I think there’s not too much information about implementation details of this stuff, only the specs.

Rork

Try to replace

doc.write('<div id="test"></div>');

with

doc.documentElement.innerHTML = '<div id="test"></div>';

See: https://stackoverflow.com/a/22645125

Fran Diox

@Rork Well, even if that works, by specs script tags created with innerHTML won’t be executed so it’s not possible to use that.
However, I just gave it another try and I came up with a work around that works in Firefox. I’ll test it a bit more :)

Rork

OK thanks :-)

Fran Diox

@Rork Forgot to tell you, this is ready in master branch since 3 days ago :sweat_smile: You can download and try the latest build here.

Rork

This is working now :+1: Thanks for your great work and nice library!