Ich möchte, dass home.html geladen wird <div id="content">.

<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="https://stackoverflow.com/questions/17636528/home.html" ></object>';
  }
</script>

Dies funktioniert gut, wenn ich Firefox verwende. Wenn ich Google Chrome verwende, fragt es nach einem Plug-in. Wie bekomme ich es in Google Chrome zum Laufen?

Endlich habe ich die Antwort auf mein Problem gefunden. Die Lösung ist

function load_home() {
     document.getElementById("content").innerHTML='<object type="text/html" data="https://stackoverflow.com/questions/17636528/home.html" ></object>';
}

Sie können die Ladefunktion von jQuery 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>

Es tut uns leid. Bearbeitet für den Klick statt auf Laden.

API abrufen

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 aufruft load_home() Funktion

Referenz – davidwalsh

MDN – Abrufen verwenden

JSFIDDLE-Demo

Abrufen von HTML auf moderne Javascript-Weise

Dieser Ansatz nutzt moderne Javascript-Funktionen wie async/await und das fetch API. Es lädt HTML als Text herunter und füttert es dann mit dem innerHTML Ihres Container-Elements.

/**
  * @param {String} url - address for the HTML to fetch
  * @return {String} the resulting HTML string fragment
  */
async function fetchHtmlAsText(url) {
    return await (await fetch(url)).text();
}

// this is your `load_home() function`
async function loadHome() {
    const contentDiv = document.getElementById("content");
    contentDiv.innerHTML = await fetchHtmlAsText("https://stackoverflow.com/questions/17636528/home.html");
}

Die await (await fetch(url)).text() mag etwas knifflig erscheinen, ist aber leicht zu erklären. Es hat zwei asynchrone Schritte und Sie könnten diese Funktion so umschreiben:

async function fetchHtmlAsText(url) {
    const response = await fetch(url);
    return await response.text();
}

Siehe die API-Dokumentation abrufen für mehr Details.

Ich sah das und dachte, es sah ganz nett aus, also führte ich einige Tests damit durch.

Es mag wie ein sauberer Ansatz erscheinen, aber in Bezug auf die Leistung hinkt es um 50% hinterher, verglichen mit der Zeit, die zum Laden einer Seite mit der jQuery-Ladefunktion oder der Verwendung des Vanilla-Javascript-Ansatzes von XMLHttpRequest benötigt wurde, die einander ungefähr ähnlich waren.

Ich kann mir vorstellen, dass dies daran liegt, dass die Seite unter der Haube auf genau die gleiche Weise abgerufen wird, aber auch ein ganz neues HTMLElement-Objekt erstellt werden muss.

Zusammenfassend empfehle ich die Verwendung von jQuery. Die Syntax ist so einfach wie möglich zu verwenden und hat einen gut strukturierten Rückruf, den Sie verwenden können. Es geht auch relativ schnell. Der Vanilla-Ansatz mag um ein paar unbemerkte Millisekunden schneller sein, aber die Syntax ist verwirrend. Ich würde dies nur in einer Umgebung verwenden, in der ich keinen Zugriff auf jQuery hatte.

Hier ist der Code, den ich zum Testen verwendet habe – er ist ziemlich rudimentär, aber die Zeiten kamen über mehrere Versuche hinweg sehr konsistent zurück, also würde ich sagen, dass er in jedem Fall auf etwa +- 5 ms genau ist. Tests wurden in Chrome von meinem eigenen Heimserver ausgeführt:

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
    <div id="content"></div>
    <script>
        /**
        * Test harness to find out the best method for dynamically loading a
        * html page into your app.
        */
        var test_times  = {};
        var test_page="testpage.htm";
        var content_div = document.getElementById('content');

        // TEST 1 = use jQuery to load in testpage.htm and time it.
        /*
        function test_()
        {
            var start = new Date().getTime();
            $(content_div).load(test_page, function() {
                alert(new Date().getTime() - start);
            });
        }

        // 1044
        */

        // TEST 2 = use <object> to load in testpage.htm and time it.
        /*
        function test_()
        {
            start = new Date().getTime();
            content_div.innerHTML = '<object type="text/html" data="' + test_page +
            '" onload="alert(new Date().getTime() - start)"></object>'
        }

        //1579
        */

        // TEST 3 = use httpObject to load in testpage.htm and time it.
       function test_()
       {
           var xmlHttp = new XMLHttpRequest();

           xmlHttp.onreadystatechange = function() {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
                {
                   content_div.innerHTML = xmlHttp.responseText;
                   alert(new Date().getTime() - start);
                }
            };

            start = new Date().getTime();

            xmlHttp.open("GET", test_page, true); // true for asynchronous
            xmlHttp.send(null);

            // 1039
        }

        // Main - run tests
        test_();
    </script>
</body>
</html>

Versuchen

async function load_home(){
  content.innerHTML = await (await fetch("https://stackoverflow.com/questions/17636528/home.html")).text();
}

async function load_home() {
  let url="https://kamil-kielczewski.github.io/fractals/mandelbulb.html"

  content.innerHTML = await (await fetch(url)).text();
}

<div id="topBar"> <a href="#" onclick="load_home()"> HOME </a> </div>
<div id="content"> </div>

Beim Benutzen

$("#content").load("content.html");

Denken Sie dann daran, dass Sie in Chrome nicht lokal “debuggen” können, da XMLHttpRequest nicht geladen werden kann — Dies bedeutet NICHT, dass es nicht funktioniert, es bedeutet nur, dass Sie Ihren Code auf derselben Domain testen müssen, auch bekannt als. Ihr Server