Come carico una pagina HTML in un usando JavaScript?

Voglio che home.html venga caricato in

.

  
function load_home(){ document.getElementById("content").innerHTML=''; }

Funziona bene quando utilizzo Firefox. Quando utilizzo Google Chrome, richiede il plug-in. Come faccio a farlo funzionare in Google Chrome?

Alla fine ho trovato la risposta del mio problema. La soluzione è

 function load_home() { document.getElementById("content").innerHTML=''; } 

Puoi utilizzare la funzione di caricamento jQuery:

  

Scusate. Modificato per il clic al posto del caricamento.

UTILIZZO DI UNA PROMESSA (API di recupero)

 function fetch_text (url) { return fetch(url).then((response) => (response.text())); } 

Quindi potresti concatenare i risultati in questo modo:

 function load_home (event) { (event || window.event).preventDefault(); fetch_text("http://www.yoursite.com/home.html").then((html) => { document.getElementById("content").innerHTML = html; }).catch((error) => { console.warn(error); }); } 

Riferimento – davidwalsh

MDN: utilizzo di Fetch

VECCHIA RISPOSTA

Poiché stai cercando di caricare contenuti html dovresti provare ad usare un iframe e assicurarti che il tuo javascript sia caricato prima del markup che chiama la funzione load_home()

EDIT: in base ai tuoi vincoli ho modificato il javascript per usare ajax invece di un iframe. prova questo

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

Demo JSFIDDLE

L’ho visto e ho pensato che fosse molto carino, quindi ho eseguito alcuni test.

Può sembrare un approccio pulito, ma in termini di prestazioni è in ritardo del 50% rispetto al tempo impiegato per caricare una pagina con la funzione di caricamento jQuery o utilizzando l’approccio vanilla javascript di XMLHttpRequest che erano approssimativamente simili tra loro.

Immagino che questo sia perché sotto la cappa ottiene la pagina nello stesso modo, ma deve anche occuparsi della costruzione di un nuovo object HTMLElement.

In sintesi suggerisco di usare jQuery. La syntax è tanto facile da usare quanto può essere e ha una richiamata ben strutturata da usare. È anche relativamente veloce. L’approccio vanilla potrebbe essere più veloce di alcuni pochi millisecondi, ma la syntax è confusa. Lo userei solo in un ambiente in cui non avevo accesso a jQuery.

Ecco il codice che ho usato per testare: è abbastanza rudimentale, ma i tempi sono tornati molto coerenti tra più tentativi, quindi direi precisi di circa + – 5 ms in ciascun caso. I test sono stati eseguiti su Chrome dal mio server di casa:

       

Quando si usa

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

Quindi ricorda che non puoi “eseguire il debug” in Chrome localmente, perché XMLHttpRequest non può essere caricato – Questo NON significa che non funzioni, significa solo che devi testare il tuo codice sullo stesso dominio, ovvero. il tuo server

Puoi usare jQuery:

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

C’è questo plugin su github che carica il contenuto in un elemento. Ecco il repository

https://github.com/abdi0987/ViaJS

showhide.html

        Show     

showhide_embedded.html

       
 some text 1 some text 2 some text 3 some text 4 some text 5 some text 6 highlight some text 7 some text 8 some text 9 

Se il tuo file html risiede localmente, vai su iframe anziché sul tag. i tag non funzionano su browser e sono principalmente utilizzati per Flash

Ad esempio: