Hoe laad ik een HTML-pagina in een <div> JavaScript gebruiken?

Ik wil dat home.html wordt geladen in <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>

Dit werkt prima als ik Firefox gebruik. Als ik Google Chrome gebruik, vraagt het om een plug-in. Hoe krijg ik het werkend in Google Chrome?


Antwoord 1, autoriteit 100%

Ik heb eindelijk het antwoord op mijn probleem gevonden. De oplossing is

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

Antwoord 2, autoriteit 30%

U kunt de jQuery-laadfunctie gebruiken:

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

Het spijt me. Bewerkt voor de on-click in plaats van bij het laden.


Antwoord 3, autoriteit 28%

API ophalen

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

op basis van uw beperkingen moet u ajax gebruiken en ervoor zorgen dat uw javascript wordt geladen vóór de opmaak die de functie load_home()aanroept

Referentie – davidwalsh

MDN – Fetch gebruiken

JSFIDDLE-demo


Antwoord 4, autoriteit 14%

HTML ophalen op de moderne Javascript-manier

Deze aanpak maakt gebruik van moderne Javascript-functies zoals async/awaiten de fetchAPI. Het downloadt HTML als tekst en voert het vervolgens door naar de innerHTMLvan uw containerelement.

/**
  * @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");
}

De await (await fetch(url)).text()lijkt misschien een beetje lastig, maar het is gemakkelijk uit te leggen. Het heeft twee asynchrone stappen en je zou die functie als volgt kunnen herschrijven:

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

Zie de fetch API-documentatievoor meer details.


Antwoord 5, autoriteit 9%

Ik zag dit en vond het er best mooi uitzien, dus ik heb er wat tests op gedaan.

Het lijkt misschien een schone benadering, maar qua prestaties loopt het 50% achter in vergelijking met de tijd die nodig was om een pagina te laden met de jQuery-laadfunctie of het gebruik van de vanilla javascript-aanpak van XMLHttpRequest, die ongeveer gelijk was aan elk ander.

Ik kan me voorstellen dat dit komt omdat het onder de motorkap de pagina op exact dezelfde manier krijgt, maar het heeft ook te maken met het construeren van een geheel nieuw HTMLElement-object.

Samenvattend raad ik aan om jQuery te gebruiken. De syntaxis is ongeveer net zo eenvoudig te gebruiken als het maar kan zijn en het heeft een mooi gestructureerde terugroepactie die u kunt gebruiken. Het is ook relatief snel. De vanille-aanpak is misschien een paar onmerkbare milliseconden sneller, maar de syntaxis is verwarrend. Ik zou dit alleen gebruiken in een omgeving waar ik geen toegang had tot jQuery.

Hier is de code die ik heb gebruikt om te testen – het is vrij rudimentair, maar de tijden kwamen zeer consistent terug bij meerdere pogingen, dus ik zou zeggen nauwkeurig tot ongeveer +- 5ms in elk geval. Tests zijn uitgevoerd in Chrome vanaf mijn eigen thuisserver:

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

Antwoord 6, autoriteit 3%

Bij gebruik van

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

Onthoud dan dat je niet lokaal kunt “debuggen” in Chrome, omdat XMLHttpRequest niet kan laden — Dit betekent NIET dat het niet werkt, het betekent alleen dat je je code op hetzelfde domein moet testen. uw server


Antwoord 7, autoriteit 3%

probeer

async function load_home(){
  content.innerHTML = await (await fetch('home.html')).text();
}

Antwoord 8, autoriteit 2%

U kunt de jQuery gebruiken:

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

Antwoord 9

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

of

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

Antwoord 10

<script>
var insertHtml = function (selector, argHtml) {
$(document).ready(function(){
    $(selector).load(argHtml);
});
var targetElem = document.querySelector(selector);
    targetElem.innerHTML = html;
};
var sliderHtml="snippets/slider.html";//url of slider html
var items="snippets/menuItems.html";
insertHtml("#main",sliderHtml);
insertHtml("#main2",items);
</script>

deze werkte voor mij toen ik probeerde een HTML-fragment toe te voegen aan mijn main.html.
Vergeet niet om ajax toe te voegen aan je code
geef klasse of id door als selector en de link naar het HTML-fragment als argHtml


Antwoord 11

Er is een plug-in op github die inhoud in een element laadt. Hier is de repo

https://github.com/abdi0987/ViaJS


Antwoord 12

Gebruik deze eenvoudige code

<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>```

Antwoord 13

Dit is meestal nodig als je header.php of welke pagina dan ook wilt opnemen.

In Javascript is het gemakkelijk, vooral als je een HTML-pagina hebt en de php include-functie niet wilt gebruiken, maar je zou de php-functie moeten schrijven en deze als Javascript-functie in de scripttag moeten toevoegen.

In dit geval moet je het schrijven zonder functie gevolgd door de naam Just. Script woede het functiewoord en start de include header.php
d.w.z. converteer de php include-functie naar de Javascript-functie in de scripttag en plaats al uw inhoud in dat opgenomen bestand.


Antwoord 14

showhide.html

<!DOCTYPE html>
<html>
    <head>
      <script type="text/javascript">
        function showHide(switchTextDiv, showHideDiv)
        {
          var std = document.getElementById(switchTextDiv);
          var shd = document.getElementById(showHideDiv);
          if (shd.style.display == "block")
          {
            shd.style.display = "none";
            std.innerHTML = "<span style=\"display: block; background-color: yellow\">Show</span>"; 
          }
          else
          {
            if (shd.innerHTML.length <= 0)
            {
              shd.innerHTML = "<object width=\"100%\" height=\"100%\" type=\"text/html\" data=\"showhide_embedded.html\"></object>";
            }
            shd.style.display = "block";
            std.innerHTML = "<span style=\"display: block; background-color: yellow\">Hide</span>";
          }
        }
      </script>
    </head>
    <body>
      <a id="switchTextDiv1" href="javascript:showHide('switchTextDiv1', 'showHideDiv1')">
        <span style="display: block; background-color: yellow">Show</span>
      </a>
      <div id="showHideDiv1" style="display: none; width: 100%; height: 300px"></div>
    </body>
</html>

showhide_embedded.html

<!DOCTYPE html>
<html>
    <head>
      <script type="text/javascript"> 
        function load()
        {
          var ts = document.getElementById("theString");
          ts.scrollIntoView(true);
        }
      </script>
    </head>
    <body onload="load()">
      <pre>
        some text 1
        some text 2
        some text 3
        some text 4
        some text 5
        <span id="theString" style="background-color: yellow">some text 6 highlight</span>
        some text 7
        some text 8
        some text 9
      </pre>
    </body>
</html>

Antwoord 15

Als uw html-bestand zich lokaal bevindt, kies dan voor iframe in plaats van de tag. tags werken niet cross-browser, en worden meestal gebruikt voor Flash

Bijvoorbeeld: <iframe src="home.html" width="100" height="100"/>

Other episodes