Search code examples
javascripthtmlinclude

browser support while including HTML

There is many options to include HTML inside another HTML code. I am not interested in the PHP option and looking for the best JavasSript solution. I found the following codes : 

<div w3-include-html="content.html"></div>

<script>
w3.includeHTML();
</script>

and the jQuery option with "load" method :

$(document).ready(function() {
    $('#item').load('example.html');
});

Which option is the best? i mean which option is supported accross the majority of browsers versions.

Thanks

Solution

  • These are effectively the same method, from the perspective of browser support. Both involve JavaScript to use XHR (aka AJAX) to get HTML from the server and inject it into the page.

    In most cases, it's better to assemble your page server-side, for at least a few reasons:

    • SEO - Not all crawlers run JavaScript
    • Page Load Speed - No need to for yet another HTTP request to get the content that was essentially requested by the user in the first place.
    • Browsers that don't run JavaScript - Some people disable JavaScript. Others use older console-based browsers that don't run JavaScript. While much of the web requires JS working these days, if you're just including HTML, best to do that server-side.