Comment puis-je charger une page HTML dans un JavaScript en utilisant?
Je veux à la maison.html à charger dans <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>
Cela fonctionne bien lorsque J'utilise Firefox. Lorsque J'utilise Google Chrome, il demande un plug-in. Comment puis-je le faire fonctionner dans Google Chrome?
10 réponses
J'ai finalement trouvé la réponse à mon problème. La solution est
function load_home() {
document.getElementById("content").innerHTML='<object type="text/html" data="home.html" ></object>';
}
Vous pouvez utiliser la fonction de chargement jQuery:
<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>
Désolé. Édité pour le clic au lieu du chargement.
Utiliser une promesse (fetch API)
function fetch_text (url) {
return fetch(url).then((response) => (response.text()));
}
Ensuite, vous pouvez enchaîner aux résultats comme suit:
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);
});
}
ANCIENNE RÉPONSE
Puisque vous cherchez à charger du contenu html, vous devriez essayer d'utiliser un iframe et vous assurer que votre javascript est chargé avant le balisage qui appelle la fonction load_home()
EDIT: en fonction de vos contraintes, j'ai modifié le javascript à utiliser ajax au lieu d'un iframe. essayez ceci
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();
}
J'ai vu cela et j'ai pensé que ça avait l'air plutôt sympa alors j'ai fait quelques tests dessus.
Cela peut sembler une approche propre, mais en termes de performance, il est en retard de 50% par rapport au temps qu'il a fallu pour charger une page avec la fonction de chargement jQuery ou en utilisant l'approche JavaScript vanille de XMLHttpRequest qui étaient à peu près similaires les uns aux autres.
J'imagine que c'est parce que sous le capot il obtient la page exactement de la même manière mais il doit aussi faire face à la construction d'un tout nouveau Objet HTMLElement ainsi.
En résumé, je suggère d'utiliser jQuery. La syntaxe est à peu près aussi facile à utiliser que possible et il a un rappel bien structuré pour vous d'utiliser. Il est également relativement rapide. L'approche vanille peut être plus rapide de quelques millisecondes imperceptibles, mais la syntaxe est déroutante. Je ne l'utiliserais que dans un environnement où je n'avais pas accès à jQuery.
Voici le code que j'ai utilisé pour tester - c'est assez rudimentaire mais les temps sont revenus très cohérents à travers plusieurs essais, donc je dirais précis à environ + - 5ms dans chaque cas. Les Tests ont été exécutés dans Chrome à partir de mon propre serveur domestique:
<!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>
Lors de l'utilisation de
$("#content").load("content.html");
Ensuite, rappelez - vous que vous ne pouvez pas "déboguer" dans chrome localement, car XMLHttpRequest ne peut pas charger-cela ne signifie pas que cela ne fonctionne pas, cela signifie simplement que vous devez tester votre code sur le même domaine aka. votre serveur
Vous pouvez utiliser le jQuery :
$("#topBar").on("click",function(){
$("#content").load("content.html");
});
Récupérer HTML de la manière Javascript moderne
Cette approche utilise des fonctionnalités Javascript modernes comme async/await et L'API fetch. Il télécharge du HTML sous forme de texte, puis le transmet à innerHTML de votre élément conteneur.
/**
* @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");
}
Le {[5] } peut sembler un peu délicat, mais il est facile à expliquer. Il a deux étapes asynchrones et vous pouvez réécrire cette fonction comme ceci:
async function fetchHtmlAsText(url) {
const response = await fetch(url);
return await response.text();
}
Consultez la documentation de L'API fetch pour plus de détails.
Il y a ce plugin sur github qui charge le contenu dans un élément. Voici le repo
Affichermasquer.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>
Si votre fichier html réside localement, optez pour iframe au lieu de la balise. les balises ne fonctionnent pas entre navigateurs et sont principalement utilisées pour Flash
Pour ex: <iframe src="home.html" width="100" height="100"/>