Charge le Contenu du Fichier HTML à Div [sans l'utilisation d'iframes]

Je suis tout à fait sûr de ce une question commune, mais je suis assez nouveau à JS et je rencontre quelques difficultés avec cette.

Je voudrais charger x.html dans un div avec l'id "y" sans utiliser les iframes. J'ai essayé quelques petites choses, cherché partout, mais je ne peux pas trouver une bonne solution à mon problème.

Je préfère quelque chose en JavaScript, si possible.

Merci à l'avance, tout le monde!

Si c'est la seule façon de le faire, je suppose que ce serait bien. Je n'ai jamais utilisé jQuery mais..
Ce n'est pas le seul moyen, mais il ne résumés plus loin de la complexité d'un problème comme celui-ci apporte. Aussi, n'oubliez pas qu'en raison des problèmes de sécurité, vous ne pouvez pas charger du HTML à partir d'autres sites (de différents noms de domaine) avec Javascript

InformationsquelleAutor MapWeb | 2010-08-20

html javascript

86

Wow, de toutes le cadre de la promotion des réponses que vous pourriez penser que c'était quelque chose de JavaScript fait incroyablement difficile. Il n'est pas vraiment le cas.
```
var xhr= new XMLHttpRequest();
xhr.open('GET', 'x.html', true);
xhr.onreadystatechange= function() {
    if (this.readyState!==4) return;
    if (this.status!==200) return; //or whatever error handling you want
    document.getElementById('y').innerHTML= this.responseText;
};
xhr.send();
```
Si vous avez besoin d'IE<8 de la compatibilité, de le faire en premier pour faire les navigateurs jusqu'à la vitesse:
```
if (!window.XMLHttpRequest && 'ActiveXObject' in window) {
    window.XMLHttpRequest= function() {
        return new ActiveXObject('MSXML2.XMLHttp');
    };
}
```
Noter que le chargement de contenu dans la page avec les scripts vont faire que le contenu invisible pour les clients sans JavaScript disponibles, tels que les moteurs de recherche. À utiliser avec précaution, et d'envisager des inclusions côté serveur si tout ce que vous voulez, c'est de mettre les données dans une commune de fichiers partagés.
- C'est une bonne réponse, car la question n'était pas à propos de JQuery. Il y a certains cas où vous vous ne pouvez pas utiliser JQuery ou un cadre de travail pour ce faire.
- Étrange, je reçois un NS_ERROR_DOM_BAD_URI: Access to restricted URI denied erreur
- on dirait que vous essayez de faire un cross-site XMLHttpRequest. C'est rejetée pour des raisons de sécurité, à moins que le site cible est inscrit.
- Aujourd'hui les navigateurs ne les laissez pas vous XHR sur le système de fichiers. Vous aurez besoin de configurer un serveur web de test.
- super réponse, savez-vous pourquoi les scripts du fichier importé ne pas rendre? En fait à l'aide de votre réponse que je peux importer que de l'html, mais pas le contenu généré, qui est rendred à partir d'un fichier json. Merci pour votre aide.
- si l'écriture <script>x</script> à innerHTML exécuté le script, le script va garder exécuter encore et encore à chaque fois que votre écrit innerHTML pour déplacer le balisage entre les éléments, et il est difficile de savoir ce contexte, le document serait pour le code exécuté en conséquence. (Normalement, le code exécuté dans un <script> bloc s'attend à être à la queue de l'analyse DOM.) NB cette explication est d'essayer de rationaliser début le comportement du navigateur qui n'était probablement pas profondément pensé, mais maintenant ne peut pas être changé.
- merci pour votre réponse,
- Comment voulez-vous faire ce travail avec un fichier externe, tel qu'un chargé à partir d'un Nextcloud exemple?
InformationsquelleAutor bobince
69

jQuery:
```
$("#y").load("x.html");
```
- jQuery est grande et fait toutes choses.
- Pourquoi cette réponse n'est pas marqué comme réponse, pour moi, il a travaillé comme un charme! C'est étonnant que seulement jquery est nécessaire de faire une page d'accueil dynamique.
- Il peut travailler et être concis, mais ce n'est pas la bonne réponse, car la question ne demande pas de jQuery solution.
- L'OP n'a jamais dit qu'il ne pouvait pas être jquery (beaucoup de gens demander/de recherche pour jquery par 'javascript'), et a précisé ce qui suit: "Si c'est la seule façon de le faire, je suppose que ce serait bien. Je n'ai jamais utilisé jQuery mais.." Donc pas, c'est certainement la meilleure réponse.
InformationsquelleAutor Dejan Marjanovic
8

2019

L'aide d'extraire
```
<script>
fetch('page.html')
  .then(data => data.text())
  .then(html => document.getElementById('elementID').innerHTML = html);
</script>

<div id='elementID'> </div>
```
d'extraction doit recevoir une adresse http ou https lien, cela signifie qu'il ne fonctionne pas en local.

Note: Comme Altimus Premier dit, c'est une fonctionnalité pour les navigateurs modernes
- +1 pour être une grande réponse pour un navigateur moderne, mais attention: après quelques heures de test, je ne pouvais pas faire ce travail dans Cordova 9.0.0, et a dû recourir à l'ancienne XMLHttpRequest qui a bien fonctionné. Je ne pense pas que Cordova prend en charge fetch encore.
InformationsquelleAutor thiagola92
5

Je vous suggère d'entrer dans l'une des bibliothèques JS là-bas. Ils s'assurer de la compatibilité de sorte que vous pouvez obtenir en place et en cours d'exécution très rapide. jQuery et DOJO sont tous les deux vraiment génial. Pour faire ce que vous essayez de le faire en jQuery, par exemple, ce serait quelque chose comme ceci:
```
<script type="text/javascript" language="JavaScript">
$.ajax({
    url: "x.html", 
    context: document.body,
    success: function(response) {
        $("#yourDiv").html(response);
    }
});
</script>
```
InformationsquelleAutor KeatsKelleher

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

InformationsquelleAutor john p

-1

http://www.boutell.com/newfaq/creating/include.html

cela expliquerait comment écrire votre propre clientsideinlcude mais jQuery est beaucoup, BEAUCOUP plus simple ... en plus vous gagnerez beaucoup plus en utilisant jQuery de toute façon

InformationsquelleAutor drusnov

Vous devez vous connecter pour publier un commentaire.