2017-08-01 4 views
0

Laden habe ich ein Bild-Banner auf der Spitze meiner Website, die ich von einem Web-Dienst heruntergeladen. Ich habe eine Datei header.html und eine Datei home.html, und um die Bearbeitung zu erleichtern, importiere ich den Code header.html in die Datei home.html. Das Banner läuft perfekt, wenn ich header.html benutze, aber wenn ich home.html ausführe, funktioniert das nicht. Wenn ich Element überprüfe, ist Platz für das Banner reserviert, aber kein Inhalt.Banner nicht nach HTML Import-Datei

Hauscode

<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 legte den Header-Code in den unten stehenden Link, denn es ist wirklich lange und hart (dank Computer generierten Code) zu lesen. Im gleichen Dokument sind Screenshots von beiden home.html und header.html

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

Antwort

1

Die Funktion zu setzen Sie rufen, w3.includeHTML durchsucht alle Tags auf der Seite, findet die mit dem Attribut w3-include-html, versucht, die Datei abzurufen, und fügt diese Datei als innerHTML ein. Die Skripte werden nicht ausgeführt.

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(); 
}; 

Sie müssen diese Skripte aufrufen. This question might help

+0

läuft Ich bin mir ziemlich sicher, dass dies das Problem ist ... Die Probleme ist, ich bin nicht wirklich gut mit Javascript (das ist, warum ich Code geliehen ....) Also Hast du eine Idee, wie man die Skripte aufruft? Ich las die andere Antwort, aber es war irgendwie über meinem Kopf –

+0

Würde der Code automatisch aufgerufen werden, wenn ich jquery oder etwas ähnliches verwendete? –

+0

Ja, das ist fair. Die einfachste Lösung wäre, den Schieberegler-Code als JavaScript-Datei 'slider.js' zu speichern. Auf jeder Seite können Sie dann den Slider-Code auf die gleiche Weise wie den 'w3.js'-Code einfügen:' '. [Siehe hier] (https://stackoverflow.com/questions/16677095/what-is-the-right-way-to-write-my-script-src-url-for-a-local-development-envir) –

0

Versuchen diesen Code

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

vor Ihrem Körper oder im Kopf-Tag

+0

Leider funktionierte keiner dieser Ideen. Trotzdem danke! –

+0

Verwenden Sie Google Chrome und öffnen Sie Ihre Datei wie diese Datei: //home.html? –

+0

Yep .... Sein wirklich durch einen wamp Server –

0

bei Sven ich die Surfer Antwort (siehe unten) Nach einem Blick erkennen, dass mein Skripte nicht laufen würde. Die js, die ich verwendete, um HTML zu importieren, führte die Scripts nicht aus, also wechselte ich zu einem Iframe-Tag, um meinen Banner-Code zu importieren, und es funktioniert perfekt.

Verwandte Themen