it-swarm.com.de

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

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>

Dies funktioniert gut, wenn ich Firefox verwende. Wenn ich Google Chrome benutze, werden Sie nach einem Plug-In gefragt. Wie kann ich es in Google Chrome zum Laufen bringen?

125
Giliweed

Ich habe endlich die Antwort auf mein Problem gefunden. Die Lösung ist 

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

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>

Es tut uns leid. Editiert für den Klick und nicht zum Laden.

59
Aaron Liske

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

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

Referenz - davidwalsh

MDN - Fetch verwenden

JSFIDDLE Demo

35
Jay Harris

Ich sah das und dachte, es sah ganz nett aus, also habe ich ein paar Tests damit gemacht.

Es mag wie ein sauberer Ansatz erscheinen, ist jedoch im Hinblick auf die Leistung um 50% zurückgeblieben, 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 in etwa ähnlich waren. 

Ich kann mir vorstellen, dass dies so ist, dass unter der Haube die Seite auf die gleiche Art und Weise abgerufen wird, es muss jedoch auch ein ganz neues HTMLElement-Objekt erstellt werden. 

Zusammenfassend empfehle ich die Verwendung von jQuery. Die Syntax ist so einfach wie möglich zu bedienen und hat einen schön strukturierten Rückruf, den Sie verwenden können. Es ist auch relativ schnell. Der Vanilla-Ansatz ist möglicherweise um einige Millisekunden schneller, 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 getestet habe - er ist ziemlich rudimentär, aber die Zeiten waren über mehrere Versuche hinweg sehr konsistent. 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>
16
Sam Redway

HTML auf moderne Weise abrufen

Dieser Ansatz verwendet moderne Javascript-Funktionen wie async/await und die fetch-API. HTML wird als Text heruntergeladen und dann in die innerHTML Ihres Containerelements eingespeist.

/**
  * @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 loadHome() {
    const contentDiv = document.getElementById("content");
    contentDiv.innerHTML = await fetchHtmlAsText("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 wie folgt umschreiben:

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

Weitere Informationen finden Sie in der fetch API-Dokumentation .

5
Lucio Paiva

Beim Benutzen 

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

Denken Sie daran, dass Sie nicht lokal in Chrome "debuggen" können, da XMLHttpRequest nicht geladen werden kann. Ihr Server

5
serup

Sie können die jQuery verwenden: 

$("#topBar").on("click",function(){
        $("#content").load("content.html");
});
4
Anup

versuchen

async function load_home(){
  content.innerHTML = await (await fetch('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>
1

Dies ist normalerweise erforderlich, wenn Sie header.php oder eine andere Seite einfügen möchten. 

In Java ist es einfach, vor allem, wenn Sie eine HTML-Seite haben und die PHP-Include-Funktion nicht verwenden möchten. In jedem Fall sollten Sie die PHP-Funktion schreiben und diese als Java-Funktion in das Skript-Tag einfügen.

In diesem Fall sollten Sie es ohne Funktion schreiben, gefolgt von dem Namen Just. Skript ruft die Funktion Word auf und startet das Include header.php Das heißt, Sie konvertieren die PHP-Include-Funktion in die Java-Funktion im Script-Tag und platzieren Ihren gesamten Inhalt in der enthaltenen Datei.

0
Creative87
$("button").click(function() {
    $("#target_div").load("requesting_page_url.html");
});

oder 

document.getElementById("target_div").innerHTML='<object type="text/html" data="requesting_page_url.html"></object>';
0
Krishna pattar

Es gibt dieses Plugin auf Github, das Inhalt in ein Element lädt. Hier ist das Repo

https://github.com/abdi0987/ViaJS

0
Run Grub