Alternative to `document.write()`

[rauschma]

What version are you using? (Don't say latest. Be specific.)

0.6.2

Why is this important?

document.write is getting out of favor. Hopefully we’ll be able to use import() before too long. Until then, maybe:

// Current
<script>
  document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
  ':35729/livereload.js?snipver=1"></' + 'script>')
</script>

// New
<script>
(function () {
    var script = document.createElement('script');
    script.src = '"http://' + (location.host || 'localhost').split(':')[0] +
  ':35729/livereload.js?snipver=1"';
    document.getElementsByTagName('head')[0].appendChild(script);
})();
</script>

[napcs]

    document.getElementsByTagName('head')[0].appendChild(script);

is less efficient. You're creating several JS objects, creating an array, then selecting the first element, then appending another element.

At least use

document.body.appendChild(script)

instead. :)

Of course, both these methods expect you have correctly coded your page. :)

document.write just inserts the string into the DOM. Popular? No. Works? Yes. Has for 22 years. Lowest common denominator.

Which brings me to my main point - this is a code snippet that you copy and paste into your development codebase, and should never make its way to production. So really, how you do it is up to you. Personally I'd use the browser extension instead of injecting the JS anyway, but different strokes I guess.

Thanks for the idea though. If enough people feel super strongly about it, I'll reopen.

[rauschma]

I like the modified version!

Chrome is moving away from document.write(): https://developers.google.com/web/updates/2016/08/removing-document-write

[napcs]

I like the modified version!

Of course you do - it's your suggestion and your opinion. :)

But it's also based on inaccurate sources.

Please read the whole document. Using document.write in production is discouraged as it affects users poorly. I agree with you there.

But for this case - adding a script element to a page to support livereloading, document write will continue to work just fine:

It states it will be disabled "when all of the following conditions are met:"

• The user is on a slow connection, specifically when the user is on 2G. (In the future, the change might be extended to other users on slow connections, such as slow 3G or slow WiFi.)
• The script in the document.write() is parser-blocking. Scripts with the 'async' or 'defer' attributes will still execute.
• The script is not hosted on the same site. In other words, Chrome will not intervene for scripts with a matching eTLD+1 (e.g. a script hosted on js.example.org inserted on www.example.org).
• The script is not already in the browser HTTP cache. Scripts in the cache will not incur a network delay and will still execute.
• The request for the page is not a reload. Chrome will not intervene if the user triggered a reload and will execute the page as normal.

This shouldn't be a problem.

But if you feel really strongly about it, make a PR and test it. Alter the docs and the example files, make sure it works on multiple operating systems and browser combinations.

That's the kind of work that goes into this. Because right now, what we have in the examples works without issue.

[rauschma]

Of course you do - it's your suggestion and your opinion. :)

I liked your suggestion for improving my version.

But if you feel really strongly about it

Good point; I don’t: it works well for me with the modified version and I don’t have the time and resources to make this happen.