Hvordan laster jeg en HTML-side i en div ved hjelp av JavaScript?

Jeg vil at home.html skal lastes inn i <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="home.html" ></object>';
  }
</script>

Dette fungerer fint når jeg bruker Firefox. Når jeg bruker Google Chrome, spør den etter en plugin. Hvordan får jeg det til å fungere i Google Chrome?

Svar #1

Jeg fant endelig svaret på problemet mitt. Løsningen er

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

Svar #2

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

basert på dine begrensninger bør du bruke ajax og sørge for at ditt javascript er lastet før mark-upen som kaller load_home()-funksjonen

Referanse - davidwalsh

MDN - Bruke Fetch

JSFIDDLE-demo

Svar #3

Du kan bruke jQuery load-funksjonen:

<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>

Beklager. Redigert for å kjøre ved klikk i stedet for ved lasting.

Svar #4

Henter HTML på den moderne Javascript-måten

Denne tilnærmingen bruker moderne Javascript-funksjoner som async/await og fetch-APIen. Den laster ned HTML som tekst og sender den deretter til innerHTML i ditt beholder-element.

/**
  * @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("home.html");
}

Kodeeksemplet await (await fetch(url)).text() kan virke litt vanskelig, men det er lett å forklare. Det har to asynkrone trinn, og du kan skrive om den funksjonen slik:

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

Se dokumentasjonen for fetch API for mer informasjon.

Svar #5

Jeg så på dette og syntes det så ganske fint ut, så jeg kjørte noen tester på det.

Det kan virke som en ren tilnærming, men når det gjelder ytelse, ligger den etter med 50 % sammenlignet med tiden det tok å laste en side med jQuery load-funksjonen eller ved å bruke den vanilje JavaScript-tilnærmingen med XMLHttpRequest, som var omtrent like hverandre.

Jeg forestiller meg at dette er fordi den under panseret får siden på nøyaktig samme måte, men den må også håndtere å konstruere et helt nytt HTMLElement-objekt.

For å oppsummere foreslår jeg å bruke jQuery. Syntaksen er omtrent så enkel å bruke som den kan være, og den har en pent strukturert callback som du kan bruke. Den er også relativt rask. Den vaniljebaserte tilnærmingen kan være raskere med noen umerkelige millisekunder, men syntaksen er forvirrende. Jeg ville bare brukt dette i et miljø hvor jeg ikke hadde tilgang til jQuery.

Her er koden jeg brukte for å teste - den er ganske enkel, men tidene kom tilbake veldig konsistente over flere forsøk, så jeg vil si presis til rundt +- 5 ms i hvert tilfelle. Testene ble kjørt i Chrome fra min egen hjemmeserver:

<!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>

Relaterte artikler