Ich möchte, dass home.html in <div id="content">
geladen wird.
<div id="topBar"> <a href ="#" onclick="load_home()"> HOME </a> </div>
<div id ="content"> </div>
<script>
function load_home(){
document.getElementById("content").innerHTML='<object type="type/html" data="home.html" ></object>';
}
</script>
Das funktioniert gut, wenn ich Firefox verwende. Wenn ich Google Chrome verwende, wird nach einem Plug-in gefragt. Wie bekomme ich es in Google Chrome zum Laufen?
Ich habe endlich die Antwort auf mein Problem gefunden. Die Lösung lautet
function load_home() {
document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}
Sie können die jQuery-Ladefunktion verwenden:
<div id="topBar">
<a href ="#" id="load_home"> HOME </a>
</div>
<div id ="content">
</div>
<script>
$(document).ready( function() {
$("#load_home").on("click", function() {
$("#content").load("content.html");
});
});
</script>
Entschuldigung. Bearbeitet für die auf Klick anstelle von auf Last.
Abruf-API
function load_home (e) {
(e || window.event).preventDefault();
fetch("http://www.yoursite.com/home.html" /*, options */)
.then((response) => response.text())
.then((html) => {
document.getElementById("content").innerHTML = html;
})
.catch((error) => {
console.warn(error);
});
}
XHR API
function load_home (e) {
(e || window.event).preventDefault();
var con = document.getElementById('content')
, xhr = new XMLHttpRequest();
xhr.onreadystatechange = function (e) {
if (xhr.readyState == 4 && xhr.status == 200) {
con.innerHTML = xhr.responseText;
}
}
xhr.open("GET", "http://www.yoursite.com/home.html", true);
xhr.setRequestHeader('Content-type', 'text/html');
xhr.send();
}
Basierend auf Ihren Einschränkungen sollten Sie Ajax verwenden und sicherstellen, dass Ihr Javascript vor dem Markup geladen wird, das die Funktion "load_home()" aufruft.
[JSFIDDLE-Demo]()