Javascript not loading properly in LiveView

[peerreynders]

Doing JS events in LiveView

LiveView uses morphdom, which uses innerHTML. Browsers don’t load script tags inserted with innerHTML.

Element: innerHTML property - Web APIs | MDN

HTML5 specifies that a <script> tag inserted with innerHTML should not execute.

---

Update:

Doing JS events in LiveView

Using Chrome Developer tools on http://palegoldenrod-grown-ibis.gigalixirapp.com/bear_game it is actually using this code path https://github.com/patrick-steele-idem/morphdom/blob/master/src/util.js#L22 and scripts will execute with Range.createContextualFragment. Try this in the console of a fresh tab: let range = document.createRange() let fragment = range.createContextualFragment(`<script>alert(1)</script>`) document.documentElement.appendChild(fragment) https://bugzilla.mozilla.org/s…

---

Aside: Phoenix 1.4 uses webpack as a bundler and LiveView itself uses modular JavaScript - so I wouldn’t recommend mixing that with non-modular JavaScript - even it it seems to work in the short term.