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

Question

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.

Is the linked page on the same domain as the source, or is this cross-domain? — Dave
– Dave, Commented Jul 15, 2015 at 20:04
You can have your html as jspf and directly include the file using <%@ include file="fileName.jspf"%>. If its external file/content then you need to use iframe. — Avi
– Avi, Commented Jul 15, 2015 at 20:05
"I would prefer NOT using jQuery." Any particular reason? It certainly is possible without it, but the wrappers jQuery provides for AJAX operations are super convenient. — esqew
– esqew, Commented Jul 15, 2015 at 20:32
@esqew how can it be done in jQuery? I am not so adamant about not using it. — Shardul
– Shardul, Commented Jul 15, 2015 at 20:37

esqew · Accepted Answer · 2015-07-15 20:48:43Z

3

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

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

^{JSFiddle illustration}

edited Jul 15, 2015 at 20:48

answered Jul 15, 2015 at 20:41

esqew

44.9k28 gold badges139 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Shardul Over a year ago

You are changing the question itself by that answer. My question is not just to load a html page. I want to load it in my script type="text/html" element.

Nebula Over a year ago

$( "script[type=text/html]" ).each(function() {$(this).load($(this).text())}); should load it for every script of type text/html.

Shardul Over a year ago

@liam_ Cannot do this. As I have multiple script type="text/html" elements. Each with different template.

Nebula Over a year ago

The whole point is that it works with multiple script type="text/html" elements? What's wrong with my code?

Shardul Over a year ago

@liam_ I have multiple script type="text/html" with different ID's. Based on those ID's I have to plug in the template (HTML pages). How do I do that?

Nathan Peixoto · Accepted Answer · 2015-07-15 20:36:29Z

0

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>

edited Jul 15, 2015 at 20:36

answered Jul 15, 2015 at 20:32

Nathan Peixoto

974 bronze badges

3 Comments

Shardul Over a year ago

How do I include it in the script type="text/html" tag?

Nathan Peixoto Over a year ago

Your script/html has no reason to be there anymore. Just put a div with a chosen ID and replace this id inside the javascript part.

Nathan Peixoto Over a year ago

Ok then just change #wrapper by #id.

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related