Cum pot încărca o pagină HTML într-o <div> folosind JavaScript?

Vreau home.html pentru a încărca într <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>

Aceasta funcționează bine atunci când folosesc Firefox. Când eu folosesc Google Chrome, acesta solicită plug-in. Cum a face I a lua it de lucru în Google Chrome?

TylerH
Întrebarea editată 9 august 2014 в 8:41
Programare
google-chrome javascript html
14 iulie 2013 в 4:30
13 vizualizări
Comentarii la întrebare (5)
Soluția

În sfârșit am găsit răspunsul la problema mea. Soluția este 

function load_home() {
     document.getElementById("content").innerHTML='';
}
Neuron
Răspuns editat 21 ianuarie 2019 в 1:14
Comentarii (8)

Puteți folosi jQuery funcția de încărcare:

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

Îmi pare rău. Editate de pe faceți clic pe încărcare.

Comentarii (1)

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

bazat pe constrângeri ar trebui să utilizați ajax și asigurați-vă că javascript este încărcat înainte de marcajul care solicită `load_home () funcția

Referință - davidwalsh

MDN - Folosind Aduce

[JSFIDDLE demo](http://jsfiddle.net/jpmCz/)

Jay Harris
Răspuns editat 22 ianuarie 2019 в 2:07
Comentarii (4)

Am văzut acest lucru și a părut că arată destul de frumos, așa că am făcut niște teste pe ea.

Poate părea ca un curat abordare, dar în termeni de performanță a rămas cu 50% față de momentul în care a luat pentru a încărca o pagină cu jQuery funcția de încărcare sau folosind vanilie javascript abordare de XMLHttpRequest care au fost aproximativ similare cu fiecare alte.

Îmi imaginez că acest lucru este pentru că sub capota devine pagina în exact același mod, dar, de asemenea, are de a face cu construirea o nouă HTMLElement obiect la fel de bine.

În rezumat, am sugerăm să utilizați jQuery. Sintaxa este la fel de ușor de utilizat, deoarece poate fi și ea are un frumos structurat suna înapoi pentru tine de a utiliza. Este, de asemenea, relativ repede. Vanilie abordare poate fi mai repede de un insesizabil câteva milisecunde, dar sintaxa este confuz. Mi-ar folosi doar acest lucru într-un mediu în care nu am't au acces la jQuery.

Aici este codul ce l-am folosit pentru testare este destul de rudimentar, dar ori s-au întors foarte coerente pe mai multe încearcă deci aș putea spune precis la aproximativ +- 5ms în fiecare caz. Testele au fost rulate în Chrome de la propriul meu server de domiciliu:




    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>


    <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  to load in testpage.htm and time it.
        /*
        function test_()
        {
            start = new Date().getTime();
            content_div.innerHTML = ''
        }

        //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>
Sam Redway
Răspuns editat 21 septembrie 2015 в 6:45
Comentarii (4)

Preluarea HTML moderne Javascript mod

Această abordare face uz de modern Javascript caracteristici, cum ar fi asincron/așteaptă " și " adu - API. Descarcă HTML ca text și apoi hraneste-l la innerHTML de element container.

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

Anii așteaptă (așteaptă aduce(url-ul)).text() poate părea un pic complicat, dar's ușor de explicat. Acesta are două asincron pași și veți putea rescrie funcția de genul asta:

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

Vezi i aducă documentația API pentru mai multe detalii.

Comentarii (0)

Atunci când se utilizează 

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

Apoi amintiți-vă că nu se poate "depanare" în google chrome de la nivel local, pentru că XMLHttpRequest nu se poate încărca ... Asta NU înseamnă că nu funcționează, înseamnă doar că aveți nevoie pentru a testa codul de pe același domeniu aka. server-ul dvs.

Comentarii (2)

Puteți folosi jQuery : 

$("#topBar").on("click",function(){
        $("#content").load("content.html");
});
Anup
Răspuns editat 22 mai 2015 в 10:45
Comentarii (4)

încercați

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>
Comentarii (0)
 
$("button").click(function() {
    $("#target_div").load("requesting_page_url.html");
});

sau 

document.getElementById("target_div").innerHTML='';
Neuron
Răspuns editat 21 ianuarie 2019 в 1:11
Comentarii (0)

Există acest plugin pe github care se încarcă de conținut într-un element. Aici este repo

https://github.com/abdi0987/ViaJS

Comentarii (0)

Acest lucru este de obicei necesară atunci când doriți să le includeți header.php sau orice pagina.

În Java's ușor mai ales dacă aveți pagină HTML și don't doriți să utilizați php include funcție, dar la toate, ar trebui să scrie funcția php și adăugați-l ca Java funcție în script tag-ul.

În acest caz, ar trebui să scrie fără function urmat de numele Doar. Script furie funcția word și începe includ header.php I. e convert php include funcție pentru funcția Java în script tag-ul și loc de toate dvs. de conținut în care sunt incluse fișier.

Pierre.Vriens
Răspuns editat 31 octombrie 2018 в 12:33
Comentarii (0)

Universal reutilizabile Pură JavaScript

Eu nu't folosi cadre sau biblioteci (clientii mei poate dacă doresc cu adevărat să) deși platforma web e't împovărat de excesiv și risipă de lățime de bandă. Funcția de mai jos este ceea ce am scris pentru a adăuga direct XML pentru "după", "înainte", "în interiorul" (devine ultimul element) sau "înlocuiți" și element existent. Nu există nici o încredere nedorite cum ar fi innerHTML (care, în multe browsere, în căutarea pentru un " id " "adăugat" în acest fel se poate't fi găsit, prin urmare, nu este de încredere). Stand-alone condiție funcții utilizate în exemplele de mai jos sunt în partea de jos a acestui post.

  • Primul parametru este poziția ("după", "înainte", "în interiorul" și "înlocuiți").
  • Al doilea element este relativă element care poate fi fie un obiect de referință (de exemplu, id_(&#39;content&#39;)) sau un șir de " id " a unui element.
  • Cel de-al treilea parametru este șirul care va fi XML pentru a fi adăugate la DOM. Rețineți că nu trebuie să aibă un spațiu de nume XML și că nu ar trebui să aibă mai mult de un element rădăcină (de exemplu, <div xmlns="http://www.w3.org/1999/xhtml"><p>tot aici</p></div>).

Funcția

function xml_add(pos, e, xml)
{
 e = (typeof e == 'string' && id_(e)) ? id_(e) : e;

 if (e.nodeName)
 {
  if (pos=='after') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e.nextSibling);}
  else if (pos=='before') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
  else if (pos=='inside') {e.appendChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true));}
  else if (pos=='replace') {e.parentNode.replaceChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
  //Add fragment and have it returned.
 }
}

Înțelegerea Corectă DOM Funcționalitate

XML încărcare prin AJAX la DOM corect necesită spațiu de nume XML (xmlns="http://www.w3.org/1999/xhtml") pe elementul rădăcină (poate nu au mai mult de un element rădăcină sau dacă faci asta, va trebui pentru a repeta). Apoi, aveți nevoie pentru a utiliza importNode. Restul de funcție este doar semantica unde XML (AJAX, de la o altă funcție, etc) este de a fi plasat în raport cu alte elemente din DOM.

Exemple De Utilizare

element.appendChild(new DOMParser().parseFromString('<div xmlns="http://www.w3.org/1999/xhtml">'+id_('post_body').value+'</div>'),'application/xml'.childNodes[0]);

Adaugă XML "după" un element specific:

xml_add('after', id_(push_current_id()).tag_('footer')[0], '<div class="hidden" id="editor_rich_temp"></div>');

Adaugă XML "înainte" un element specific:

xml_add('before', $('#'+push_current_id()+' section')[0], '<h2 xmlns="http://www.w3.org/1999/xhtml"><span>Compose Message</span></h2>');

Adaugă XML "în interiorul" un element specific (pentru a deveni ultimul copil element):

xml_add('inside', $('body > header > nav')[1], xml);

Pură JavaScript stand-alone condiție funcții

Acestea sunt funcții folosit pe platforma, pentru a evita pedepsirea utilizatorilor cu cinci copii de cadre/biblioteci și asigurarea de înaltă performanță:

function $(o) {var r = false; if (document.querySelectorAll) {r = document.querySelectorAll(o);} return r;}

function class_(c) {return (document.getElementsByClassName(c)) ? document.getElementsByClassName(c) : false;}

function tag_(t) {return (document.getElementsByTagName(t)) ? document.getElementsByTagName(t) : false;}

Combinând Funcții Personalizate

Dacă doriți curat profesionale JavaScript te're de gând să nevoie pentru a utiliza "prototip" care este uimitor. În exemplu id_(&#39;de exemplu&#39;).tag_(&#39;td&#39;)[0].class_(&#39;bine&#39;)[0] funcționează mult mai ușor decât să te pui cu $ interiorul bucle.

Object.prototype.$ = function(c) {return (this.querySelectorAll && this.querySelectorAll(c) && this.querySelectorAll(c).length > 0) ? this.querySelectorAll(c) : false;}

Object.prototype.class_ = function(c) {return (this.getElementsByClassName && this.getElementsByClassName(c) && this.getElementsByClassName(c).length > 0) ? this.getElementsByClassName(c) : false;}

Object.prototype.tag_ = function(t) {return (this.getElementsByTagName && this.getElementsByTagName(t) && this.getElementsByTagName(t).length > 0) ? this.getElementsByTagName(t) : false;}

Plin De Cufere Cu Comori

Am actualiza codul în rare ocazii (pentru ca's rock solid, nu "versiune" dependente). De programare pură JavaScript-l's ușor pentru a evita masiv low-performanță cadre și biblioteci. https://www.jabcreations.com/docs/javascript/#functions

Comentarii (0)

showhide.html





      <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
Comentarii (1)

Dacă fișierul html se află la nivel local, apoi du-te pentru iframe în loc de tag-ul. tag-uri nu funcționează cross-browser, și sunt folosite mai ales pentru Flash

De ex : <iframe src="home.html" lățime="100" înălțime="100"/>

Comentarii (0)