include html in other html with a .js attached

Question

I have this simple html:

  <head>
      <h1>Prueba</h1>
  </head>

  <body>

      <form method="POST" action="">
            Introduce KeyWord <input type="text" name="key">
            <input type="submit" name="submit" value="Submit">
      </form>

  </body>

Now, i want to include inside other html which has severak .js attached. I have seen different ways but i only get include only the file html, without the .js attached.

Any help? Thank you so much!

Edit: This is the other html that i want include inside, with the js attached:

<html>
 <head>
  <meta charset="UTF-8">
  <title>Word Cloud</title>
  <script src="d3.js" charset="utf-8"></script>
  <script src="d3.layout.cloud.js"></script>
  <script src="d3.wordcloud.js"></script>
  <script src="example.words.js"></script>
  </head>
  <body style="text-align: center">
  <h1>Word Cloud</h1>
  <div id='wordcloud'></div>

  </body>
</html>

I think you are new to programming. I had mentioned that you have to run this one server. If you xampp or node server installed in your PC do check on that — nitishk72, May 10 '18 at 18:01
If you are getting blank screen then.Dou check you console there you will find `Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https` this error — nitishk72, May 10 '18 at 18:02
here I can't give you any tutorial. If this links works https://plnkr.co/edit/kByh82pSAw6sQAOFp5gO?p=preview .Do mark my answer correct. my answer is perfect — nitishk72, May 10 '18 at 18:23
but this works if i have files .js attached in the text.html? — AntonioMJ, May 10 '18 at 18:26
You can't include a file with ``, ``, and `` tags inside another HTML file with those tags. An HTML document can only have one of each of those tags, and they can't be nested. — Barmar, May 14 '18 at 15:18

score 1 · Answer 1 · edited May 10 '18 at 18:25

Demo Link : https://plnkr.co/edit/kByh82pSAw6sQAOFp5gO?p=preview

you can include html file using this javascript function:

javascript: and html code:

    function includeHTML() {
      var z, i, elmnt, file, xhttp;
      /*loop through a collection of all HTML elements:*/
      z = document.getElementsByTagName("*");
      for (i = 0; i < z.length; i++) {
        elmnt = z[i];
        /*search for elements with a certain atrribute:*/
        file = elmnt.getAttribute("w3-include-html");
        if (file) {
          /*make an HTTP request using the attribute value as the file name:*/
          xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (this.readyState == 4) {
              if (this.status == 200) {elmnt.innerHTML = this.responseText;}
              if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
              /*remove the attribute, and call this function once more:*/
              elmnt.removeAttribute("w3-include-html");
              includeHTML();
            }
          }      
          xhttp.open("GET", file, true);
          xhttp.send();
          /*exit the function:*/
          return;
        }
      }
    };
    includeHTML();

 <!DOCTYPE html>
 <html>
    <body>
      <div w3-include-html="<**html-name-file**>"></div> 
    </body>
 </html>

i found this code there

this is only for including javascript code. It will not run js code. — nitishk72, May 10 '18 at 18:04
nobody said that your code is not working, i just said that mine is working too ^^ peace. — JacopoDT, May 10 '18 at 18:13

kudeh · Answer 2 · 2018-05-10T18:08:31.767

-1

You can make use of an iframe to embed another website into yours like so:

<iframe src="other.html" height="200" width="300"></iframe>

In this case other.html contained links to other pages in the website and links to js files.

edited May 10 '18 at 18:08

answered May 10 '18 at 17:08

kudeh

883
1
5
16

If he decides to use 5 or 10 different additional html files, this will fall apart really quickly. Even at 3 it would get really slow. – Max Baldwin May 10 '18 at 17:19
@MaxBaldwin He seems to be interested in adding only one html file. I think this is the simplest way to go about it especially if it's a small application that's not gonna get huge. – kudeh May 10 '18 at 17:55

nitishk72 · Answer 3 · 2018-05-10T18:19:36.327

Demo Link: https://plnkr.co/edit/kByh82pSAw6sQAOFp5gO?p=preview This one is working absolutely fine.

Keep one thing in mind that if you will test on your PC it will not work directly. You will get an error in your console Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https..

So, do test on the server I mean localhost

Happy Coding

<!DOCTYPE html>
<html>
   <script>
      function includeHTML() {
        var z, i, elmnt, file, xhttp;
        /*loop through a collection of all HTML elements:*/
        z = document.getElementsByTagName("*");
        for (i = 0; i < z.length; i++) {
          elmnt = z[i];
          /*search for elements with a certain atrribute:*/
          file = elmnt.getAttribute("data-include");
          if (file) {
            /*make an HTTP request using the attribute value as the file name:*/
            xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
              if (this.readyState == 4) {
                if (this.status == 200) {
                    // Get the DOMPareser to parse String into HTML
                    var  parser = new DOMParser();
                    var  doc = parser.parseFromString(this.responseText, "text/html");;
                    elmnt.innerHTML = this.response ;
                    var allscripts = doc.getElementsByTagName('script');              
                    // Run all the Javascript
                    for(var k = 0; k<allscripts.length;k++){
                      var x = allscripts[k].innerHTML;
                      eval(x);
                    }
                  }
                if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
                /*remove the attribute, and call this function once more:*/
                elmnt.removeAttribute("data-include");
                includeHTML();
              }
            }      
            xhttp.open("GET", file, true);
            xhttp.send();
            /*exit the function:*/
            return;
          }
        }
      };
   </script>
   <body>
      <div data-include="text.html"></div>
      <script>
         includeHTML();
      </script>
   </body>
</html>

This won't work. Script tags won't be processed if assigned via `innerHTML` — Quentin, May 10 '18 at 17:11
You overwrite `elmn` in a loop, so this will attempt to write linked page to *the last* element in the document. — Quentin, May 10 '18 at 17:12
Calling `includeHTML` recusively will cause elements with `data-include` to be loaded multiple times. — Quentin, May 10 '18 at 17:13
This is working man. I am calling recursively because there may be more than include file — nitishk72, May 10 '18 at 17:15

include html in other html with a .js attached

3 Answers3