web-dev-qa-db-fra.com

Charger dynamiquement une page HTML dans div avec jQuery

J'essaie de faire en sorte que lorsque je clique sur un lien dans une page HTML, il charge dynamiquement la page demandée dans un div avec jQuery.

Comment puis je faire ça?

<html>
<head>
<script type="text/javascript">
    // what can I do for load any url clicked?
</script>
</head>
<body>
<div id="content"></div>

<a href="page1.html">Page 1</a><br />
<a href="page2.html">Page 2</a><br />
<a href="page3.html">Page 3</a><br />
<a href="page4.html">Page 4</a><br />
<a href="page5.html">Page 5</a><br />
<a href="page6.html">Page 6</a><br />
</body>
</html>
javascriptjqueryhtmlcss
15
Saeed

Il existe un plugin jQuery appelé pjax qui dit: "C'est un ajax avec de vrais permaliens, des titres de page et un bouton précédent qui dégrade complètement."

Le plugin utilise HTML5 pushState et AJAX pour changer de page de manière dynamique sans charge complète. Si pushState n'est pas pris en charge, PJAX effectue un chargement complet de la page, assurant ainsi la compatibilité avec les versions antérieures.

Ce que pjax fait, c'est qu'il écoute des éléments de page spécifiés tels que <a>. Ensuite, lorsque l'élément <a href=""></a> est appelé, la page cible est extraite avec l'en-tête X-PJAX ou un fragment spécifié.

Exemple:

<script type="text/javascript">
  $(document).pjax('a', '#pjax-container');
</script>

Si vous placez ce code dans l'en-tête de la page, tous les liens du document seront écoutés et l'élément à extraire de la nouvelle page à remplacer à la place de la page actuelle.

(ce qui signifie que vous voulez remplacer #pjax-container sur la page actuelle par #pjax-container à partir de la page distante)

Lorsque <a> est appelé, il récupère le lien avec l'en-tête de requête X-PJAX et recherche le contenu de #pjax-container dans le résultat. Si le résultat est #pjax-container, le conteneur de la page en cours sera remplacé par le nouveau résultat.

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript" src="jquery.pjax.js"></script> 
  <script type="text/javascript">
    $(document).pjax('a', '#pjax-container');
  </script> 
</head>
<body>
  <h1>My Site</h1>
  <div class="container" id="pjax-container">
    Go to <a href="/page2">next page</a>.
  </div>
</body>
</html>

Si #pjax-container n'est pas le premier élément trouvé dans la réponse, PJAX ne reconnaîtra pas le contenu et n'effectuera un chargement complet de la page que sur le lien demandé. Pour résoudre ce problème, le code serveur du serveur devrait être défini sur envoyer uniquement #pjax-container.

Exemple de code côté serveur de page2:

//if header X-PJAX == true in request headers, send
<div class="container" id="pjax-container">
  Go to <a href="/page1">next page</a>.
</div>
//else send full page

Si vous ne pouvez pas modifier le code côté serveur, l'option fragment est une alternative.

$(document).pjax('a', '#pjax-container', { 
  fragment: '#pjax-container' 
});

Notez que fragment est une option plus ancienne de pjax et semble extraire l'élément enfant de l'élément demandé.

14
hexacyanide

Le chargement JQuery fonctionne, mais il supprimera le javascript et les autres éléments de la page source. Cela a du sens car vous pourriez ne pas vouloir introduire de mauvais script sur votre page. Je pense que ceci est une limitation et puisque vous faites une page entière et pas seulement une div sur la page source, vous pourriez ne pas vouloir l'utiliser. (Je ne suis pas sûr à propos de CSS, mais je pense qu'il serait également dépouillé)

Dans cet exemple, si vous mettez une balise autour du corps de votre page source, tout ce qui se trouve entre les balises sera capturé et ne sera jamais effacé. J'emballe ma page source avec et.

Cette solution saisira tout entre les délimiteurs ci-dessus. Je pense que c'est une solution beaucoup plus robuste qu'une simple charge.

  var content = $('.contentDiv');
    content.load(urlAddress, function (response, status, xhr) {
        var fullPageTextAsString = response;
        var pageTextBetweenDelimiters = fullPageTextAsString.substring(fullPageTextAsString.indexOf("<jqueryloadmarkerstart />"), fullPageTextAsString.indexOf("<jqueryloadmarkerend />"));
        content.html(pageTextBetweenDelimiters);
    });
6
user957863

Je pense que cela le ferait:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){

         $(".divlink").click(function(){
         $("#content").attr("src" , $(this).attr("ref"));

});

});
</script>
</head>
<body>
<iframe id="content"></iframe>

<a href="#" ref="page1.html" class="divlink" >Page 1</a><br />
<a href="#" ref="page2.html" class="divlink" >Page 2</a><br />
<a href="#" ref="page3.html" class="divlink" >Page 3</a><br />
<a href="#" ref="page4.html" class="divlink" >Page 4</a><br />
<a href="#" ref="page5.html" class="divlink" >Page 5</a><br />
<a href="#" ref="page6.html" class="divlink" >Page 6</a><br />
</body>
</html>

En passant, si vous pouvez éviter Jquery, vous pouvez simplement utiliser l'attribut target de l'élément <a>

<html>
<body>
<iframe id="content" name="content"></iframe>

<a href="page1.html" target="content" >Page 1</a><br />
<a href="page2.html" target="content" >Page 2</a><br />
<a href="page3.html" target="content" >Page 3</a><br />
<a href="page4.html" target="content" >Page 4</a><br />
<a href="page5.html" target="content" >Page 5</a><br />
<a href="page6.html" target="content" >Page 6</a><br />
</body>
</html>
5
Simcha Khabinsky

Essayez avec celui-ci:

$(document).ready(function(){
  $('a').click(function(e){
     e.preventDefault();
     $("#content").load($(this).attr('href'));
  });
});

et assurez-vous d'appeler d'abord cette bibliothèque:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
5
Jai

Je pense que vous recherchez la fonction Jquery Load . Vous voudriez simplement utiliser cette fonction avec une fonction onclick liée à une balise ou à un bouton si vous le souhaitez.

3
nathan hayfield

Vous pouvez utiliser getJSON () ou Load () de jQuery; avec ce dernier, vous pouvez référencer un fichier html existant. Pour plus de détails, voir http://www.codeproject.com/Articles/661782/Three-Ways-to-Dynamically-Load-HTML-Content-into-a

1
B. Clay Shannon

Vous pouvez via option

Essayez ceci avec quelques modifications 

<div trbidi="on">
<script type="text/javascript">
function MostrarVideo(idYouTube)
{
var contenedor = document.getElementById('divInnerVideo');
if(idYouTube == '')
{contenedor.innerHTML = '';
} else{
var url = idYouTube;
contenedor.innerHTML = '<iframe width="560" height="315" src="https://www.youtube.com/embed/'+ url +'" frameborder="0" allowfullscreen></iframe>';
}
}
</script>


<select onchange="MostrarVideo(this.value);">
<option selected disabled>please selected </option>
<option value="qycqF1CWcXg">test1</option>
<option value="hniPHaBgvWk">test2</option>
<option value="bOQA33VNo7w">test3</option>
</select>
<div id="divInnerVideo">
</div>

Si vous voulez mettre une page par défaut placée dans id = "divInnerVideo"

exemple:

<div id="divInnerVideo">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/pES8SezkV8w?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
1
sn ps