Banner not loading after importing HTML file

Question

I have a picture banner on the top of my website that I downloaded from a web service. I have a header.html and a home.html file, and for ease of editing, I import the header.html code into the home.html file. The banner runs perfectly when I run header.html, but when I run home.html it doesn't. When I inspect element, there is space allocated for the banner, but no content.

home code

<html>
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Saisentan Music</title>
    <meta name="home page" content="Epic Orchestral Music by Taylor Barton">
    <link rel="stylesheet" href="style.css">

</head>

<body>

    <script src="https://www.w3schools.com/lib/w3.js"></script>
    <div w3-include-html="header.html"></div>
    <script>w3.includeHTML();</script>

    HOME


</body>

Ill put the header code in the link below, because its really long and hard to read (thanks computer generated code). In the same document are screenshots of both home.html and header.html

https://docs.google.com/document/d/1hWNrjLP11FvTJQgBPa19_NmVn1d5nTr-k1dhqdVwcE0/edit?usp=sharing

score 1 · Accepted Answer · answered Aug 01 '17 at 16:49

1

The function you are calling, w3.includeHTML looks through all the tags on the page, finds those with the attribute w3-include-html, tries to get the file, and inserts that file as the innerHTML. The scripts are not executed.

w3.includeHTML = function(cb) {
  var z, i, elmnt, file, xhttp;
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          elmnt.innerHTML = this.responseText;
          elmnt.removeAttribute("w3-include-html");
          w3.includeHTML(cb);
        }
      }      
      xhttp.open("GET", file, true);
      xhttp.send();
      return;
    }
  }
  if (cb) cb();
};

You need to call those scripts. This question might help

answered Aug 01 '17 at 16:49

Namaskar

2,114
1
15
29

I'm pretty sure this is the issue... The problems is, I'm not real good with javascript (that's why I borrowed code....) So do you have any idea how to call the scripts? I read the other answer but it was kind of over my head – Taylor Barton Aug 01 '17 at 17:08
Would the code automatically be called if I used jquery or something like that? – Taylor Barton Aug 01 '17 at 17:09
Yeah, that's fair. The most simple solution would be to save the slider code as a JavaScript file, `slider.js`. In each page, you can then include the slider code the same way you included the `w3.js` code: ``. [See here](https://stackoverflow.com/questions/16677095/what-is-the-right-way-to-write-my-script-src-url-for-a-local-development-envir) – Namaskar Aug 01 '17 at 17:14

score 0 · Answer 2 · answered Aug 01 '17 at 16:48

0

Try to put this code

<script src="https://www.w3schools.com/lib/w3.js"></script>

before your body or inside the head tag

answered Aug 01 '17 at 16:48

Gabriel Diez

1,648
2
17
26

Unfortunately neither of those ideas worked. Thanks though! – Taylor Barton Aug 01 '17 at 16:54
Are you using Google Chrome and opening your file like this file://home.html ? – Gabriel Diez Aug 01 '17 at 17:11

score 0 · Answer 3 · answered Aug 01 '17 at 17:38

0

After looking at Sven the surfers answer (see below) I realized that my scripts were not being run. The js I was using to import html was not running the scripts, so I changed to using an Iframe tag to import my banners code, and it works perfectly.

answered Aug 01 '17 at 17:38

Taylor Barton

45
2
10

Banner not loading after importing HTML file

3 Answers3