Wie lade ich eine HTML-Seite in einem div mit JavaScript?

Lesezeit: 8 Minuten

Wie lade ich eine HTML Seite in einem div mit JavaScript
Gilikraut

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?

  • Und denken Sie daran, false wie in zurückzugeben load_home(); return false

    – mplungjan

    14. Juli 2013 um 4:37 Uhr

  • Ohne Bibliotheken gar nicht so einfach. Vielleicht ist es besser, in einen iFrame zu laden. Schauen Sie sich diesen Beitrag an: stackoverflow.com/questions/14470135/…

    – sgeddes

    14. Juli 2013 um 4:41 Uhr

  • home.html ist eine einfache Webseite, ich habe sie einfach home genannt. @jayharris

    – Giliweed

    14. Juli 2013 um 4:46 Uhr

  • Und Sie versuchen, alles auf dieser Seite in das Inhaltselement zu laden oder einfach einen Link zu der Seite in das Inhaltselement zu platzieren?

    – adeneo

    14. Juli 2013 um 4:47 Uhr

  • Ich versuche, alles auf dieser Seite in das Inhaltselement zu laden. Ich habe die Frage bearbeitet. @adeneo

    – Giliweed

    14. Juli 2013 um 5:08 Uhr

Wie lade ich eine HTML Seite in einem div mit JavaScript
Gilikraut

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>';
}

  • Auch wenn dies elegant und sauber ist, nehme ich an, dass es besser wäre, wenn Sie das Objektelement tatsächlich über die DOM-API erstellen würden.

    – David

    21. Januar 2015 um 19:13 Uhr

  • Dies ist langsam und unsicher anzugreifen – siehe meine Antwort unten (war zu lang, um in den Kommentar zu passen)

    – Sam Redway

    19. September 2015 um 17:38 Uhr

  • @DavidMaes was schlagen Sie vor? kannst du ein muster zeigen?

    – Xsmael

    24. November 2016 um 13:12 Uhr

  • Dies mag zwar unsicher sein, aber wenn Sie eine einfache Entwicklung „lokal in einem Ordner auf Ihrem Desktop“ durchführen, ist dies in Ordnung – nicht jeder betreibt eine Bank-Website mit Kunden, die Bankkontoinformationen verarbeiten und einem XSS-Angriff ausgesetzt sind. Vielen Dank für die Lösung, für meine Bedürfnisse musste ich schließlich einen anderen Weg gehen und einen Python-Server benötigen und die reguläre Jquery-Funktion load() für extern dynamisch geladenes HTML verwenden. Aber das war hilfreich, um mich in meinem Problem voranzubringen

    – Warner

    7. April 2017 um 16:07 Uhr


  • @KamilKiełczewski type="type/html" geändert wird type="text/html"

    – Schajan

    25. April 2019 um 19:01 Uhr

Wie lade ich eine HTML Seite in einem div mit JavaScript
Aaron Liske

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.

  • Hallo, ich habe versucht, diese Methode zu verwenden, aber ich kann es nicht zum Laufen bringen. Ich kann eine neue Frage eröffnen, wenn Sie möchten. Danke. Meine Geige ist hier:jsfiddle.net/ekareem/aq9Laaew/288345

    – Keine Chance

    8. Dezember 2018 um 13:39 Uhr

1646256728 548 Wie lade ich eine HTML Seite in einem div mit JavaScript
Jay Harris

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

  • Danke. aber mein Code bezieht sich auf einen Teil eines Projekts. und es tut mir leid zu sagen, dass ich Iframe nicht in der Projektarbeit verwenden soll. Ich habe die Frage bearbeitet. schau mal bei @jay harris

    – Giliweed

    14. Juli 2013 um 5:12 Uhr


  • @Jay Harris: Was ist mit der Richtlinie zur gleichen Herkunft?

    – Arun Raj

    29. April 2014 um 12:49 Uhr

  • @ArunRaj Sie können keine Seite laden, die von einer anderen Website in Javascript stammt, da dies ein Sicherheitsproblem darstellt. Sie können jedoch ein Skript von Ihrem Server laden, das wiederum diese andere Seite lädt und sie über Ajax an Javascript zurückgibt.

    – Jay Harris

    29. April 2014 um 19:56 Uhr

  • Hinzufügen eines Content-Type Kopfzeile zu a GET Anfrage macht keinen Sinn – ich denke, Sie meinten setRequestHeader("Accept", "text/html") ?

    – mindplay.dk

    8. Januar 2019 um 13:27 Uhr

Wie lade ich eine HTML Seite in einem div mit JavaScript
Lucio Paiva

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.

1646256729 27 Wie lade ich eine HTML Seite in einem div mit JavaScript
Sam Redweg

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>

  • Ich denke, anstatt “genau” meinst du “präzise”.

    – pulse0ne

    19. September 2015 um 18:26 Uhr

  • Ich meine, ich habe es viele Male laufen lassen und es gab jedes Mal nur eine Schwankung von ein paar Millisekunden. Die angegebenen Zeiten sind also auf +- 5 ms oder etwas in der Nähe davon genau. Tut mir leid, dass ich mich da vielleicht nicht ganz klar ausgedrückt habe.

    – Sam Redway

    19. September 2015 um 18:50 Uhr

1646256729 629 Wie lade ich eine HTML Seite in einem div mit JavaScript
Kamil Kielczewski

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>

  • Ich denke, anstatt “genau” meinst du “präzise”.

    – pulse0ne

    19. September 2015 um 18:26 Uhr

  • Ich meine, ich habe es viele Male laufen lassen und es gab jedes Mal nur eine Schwankung von ein paar Millisekunden. Die angegebenen Zeiten sind also auf +- 5 ms oder etwas in der Nähe davon genau. Tut mir leid, dass ich mich da vielleicht nicht ganz klar ausgedrückt habe.

    – Sam Redway

    19. September 2015 um 18:50 Uhr

1646256729 136 Wie lade ich eine HTML Seite in einem div mit JavaScript
serup

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

  • “jQuery” != “javascript” || jQuery < javascript || OP.indexOf("jQuery") < 1

    – KittenCodings

    15. Dezember 2015 um 9:05 Uhr


916330cookie-checkWie lade ich eine HTML-Seite in einem div mit JavaScript?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy