CODEWITHSUNDEEP
javascripthtmlcss
Shardul
Shardul

Reputation: 1004

script type="text/html" include HTML from a file

I have a <script type="text/html"> like below:

<script type="text/html" id="id">
        // I want to import HTML from a file here
</script>

Please suggest any other solution than <object>, <iframe> and <embed> Those tags are messing up my CSS as they insert their own HTML, BODY and other elements.

I would prefer NOT using jQuery. Although not so adamant about it.

EDIT:

script type="text/html" is MUST as I am using templates to route between the pages. And the template is identified by the "id" of this script type="text/html" element.

Upvotes: 0

Views: 3144

Answers (2)

esqew
esqew

Reputation: 44710

If you do consider utilizing jQuery, .load() will do the trick:

$( "#id" ).load( "path/to/file.html" );

JSFiddle illustration

Upvotes: 3

Nathan Peixoto
Nathan Peixoto

Reputation: 122

If your file is on the same domain, I suggest you use ajax to recover it. Like this:

<div id="wrapper"></div>

<script type="text/javascript">
    var remote_html_container = jQuery("#wrapper");
    jQuery.ajax({
      url: "my-page-url",
      success: function(data){
        remote_html_container.html(data);
      }
    });
</script>

What it does is load the page's output through jQuery and "paste it" into the div#wrapper.

EDIT: It's indeed way easier with the load function:

<div id="wrapper"></div>

<script type="text/javascript">
  jQuery("#wrapper").load("my-url.html");
</script>

Upvotes: 0

Related Questions