Chargement d'un fichier HTML dans une balise DIV avec un lien

Il y a plusieurs sujets sur ce sujet, mais aucun qui a complètement répondu à ma question.

Je voudrais être en mesure d'avoir un lien qui charge un ensemble de fichiers HTML dans un DIV.

Ce, par exemple, se charge juste le texte dans mon "MainBack" DIV. Il fonctionne très bien:

<a href="#computing" onclick="document.getElementById('MainBack').innerHTML = '<p>1</p>';">Computing</a>

mais je voudrais charger un ensemble de fichiers comme ceci:

<a href="#computing" onclick="document.getElementById('MainBack').innerHTML = 'HTML FILE';">Computing</a>

Des conseils? Je suis assez nouveau dans ce!

OriginalL'auteur Mark Brewerton | 2011-02-13

  1. 7

    Vous pouvez utiliser un <iframe> de le faire:

    <iframe src="link.html" width="100%" height="300"></iframe>

    Démonstration En Direct

    Code:

    <a href="#computing" onclick="document.getElementById('MainBack').innerHTML = '<iframe src=\'http://www.google.com\' scrolling=\'no\' frameborder=\'0\' width=\'100%\' height=\'600px\'></iframe>'">Computing</a>

    Ou vous pouvez utiliser lightbox de le faire dans une très jolie manière...

    Il affiche, photos, vidéos, HTML... en gros tout ce que vous voulez.

    Comment faut-il formaté? Dois-je le garder à l'intérieur " ? Si oui, il ne semble pas fonctionner.
    Êtes-vous du chargement d'un fichier Externe ou tout simplement une charge de code HTML?
    Un chargement de code HTML, il semble juste plus propre pour charger un fichier externe.
    Ouais vous avez raison, le mieux est de le placer dans un fichier HTML externe, puis d'appeler le <iframe> avec l'événement onclick, ou de l'utilisation de lightbox qui vous donne une belle translucide pop-up
    D'intérêt, comment aurais-je viens de charger le code HTML? Je semble être en mesure de charger quelque chose comme <p>1</p> mais pas des trucs comme YouTube intègre.

    OriginalL'auteur Myles Gray

  2. 6

    À l'aide de la jQuery ajax API, vous pouvez saisir le contenu d'une balise à l'intérieur du document à partir d'une URL:

    <a href="#computing" 
   onclick="$('#MainBack').load('/path/file.html body')"
>
    Computing
</a>

    Important:

    1. #MainBack est l'ID de l'emplacement de la balise dans votre document parent
    2. /path/file.html id de l'URL du document que vous voulez charger les données à partir de
    3. body l'étiquette est maintenant le contenu que vous souhaitez charger.

    Ce qui peut aller mal:

    • case #1 ci-dessus, est-ce que votre document parent a une étiquette avec l'exacte ID que vous utilisez dans l'appel ajax?
    • case #2, vous pouvez charger l'URL dans une fenêtre de navigateur distincte?
    • si vous pouvez charger l'URL, utilisez l'option "afficher la source" option d'inspecter le code source HTML et assurez-vous que le sélecteur de vous à l'aide en 3 ci-dessus. Peut-être que le contenu est généré dynamiquement à partir de JavaScript au lieu d'être servi par le serveur HTTP, dans ce cas, utilisez la iframe solution de l'autre réponse.
    • vérifier la console JavaScript et de rechercher des messages à propos de la croix-domaine des questions, CSRF, CORS, etc. Si le contenu est d'un autre domaine, vous pouvez tomber sur le navigateur des règles de sécurité; c'est une toute nouvelle boîte de pandore et je ne couvrira pas les solutions possibles ici, prendre le message d'erreur de la console et de google pour cela.
    Cela ne semble pas fonctionner...
    Avez-vous chargé jQuery dans le code HTML de section d'en-tête? Veuillez lire les docs et voir les exemples dans le lien donné.
    Il devrait fonctionner. Celui-ci est beaucoup plus propre solution de l'iFrame.

    OriginalL'auteur Paulo Scardine

  3. 1
    <a href="#computing" onclick="document.getElementById('MainBack').innerHTML = '<iframe src=\'http://www.google.com\'></iframe>'">Computing</a>

    --> Démo <--

    OriginalL'auteur Shaz

  4. 0

    Vous ne pouvez pas charger un complet de la page html dans une autre. Par cela, je veux dire que vous ne avez une majoration comme ceci:

    <html>
  <head></head>
  <body>
    <div>
      <html>
      ...
      </html>
  </body>
</html>

    Peut-être la chose que vous êtes à la recherche d'une iframe? Une petite "fenêtre" dans votre page vers une autre page?

    Si iframe ne vous convient pas, jetez un oeil à cette fonction Jquery qui charge une page html à partir d'une autre source dans votre sélecteur de spécifié: http://api.jquery.com/load/

    Que diriez-vous si je voulais juste charger une partie d'une page HTML? Quelque chose comme ceci: <p>Dans le calcul de je apprendre la programmation, avec la théorie derrière des ordinateurs et de la logique.</p><br /><p>Voici une vidéo sur la pile TCP/IP que j'ai faite avec un ami:</p><iframe title="YouTube video player" width="640" height="390" src="youtube.com/embed/oeGt3exwqoE" frameborder="0" allowfullscreen></iframe>

    OriginalL'auteur Mārtiņš Briedis

  5. 0

    Vous pouvez charger du contenu HTML à partir d'un autre fichier via jQuery ".load()" la méthode.

    Tout d'abord, dans la section d'en-TÊTE de votre fichier html principal, vous devez inclure cette ligne pour accéder aux bibliothèques jQuery fonctions: 

    <script> src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

    Deuxième, ajoutez ce code à l'intérieur de la TÊTE de la section de charger le contenu dans la DIV:

    <script>
$(document).ready(function() {
    $('#MainBack').load('html-content-file.html');    
});
</script>

    Exemple du contenu d'html-content-file.html:

      <a class="brand" href="#">240Dots</a>
  <div class="navbar-content">
    <ul class="nav">
      <li>
        <a href="index.html">Inicio</a> 
      </li>
      <li>
        <a href="quienes-somos.html">Quienes Somos</a> 
      </li>
      <li>
        <a href="servicios.html">Servicios</a> 
      </li>
      <li>
        <a href="contactar.html">Contactar</a>
      </li>
    </ul>
  </div>

    Plus d'infos: http://docs.jquery.com/Ajax/load

    Il y a une erreur dans votre code: <script> src="http://... devrait être <script src="http://.... Petit détail Important.

    OriginalL'auteur Tony S.

  6. 0

    Utilisation document.getElementById('element').innerHTML = 'HTML SOURCE' avec un événements javascript. Cela fonctionne tout à fait sans problèmes.

    Comment charger la "SOURCE HTML"?
    Sur une requête AJAX

    OriginalL'auteur Pushpendu Ghosh