recherche

Maison  >  Article  >  interface Web  >  Comment charger des fichiers HTML externes à l'aide de la méthode de chargement de jQuery

Comment charger des fichiers HTML externes à l'aide de la méthode de chargement de jQuery

不言
不言original
2018-12-12 17:03:248853parcourir

Comment charger des fichiers HTML externes à laide de la méthode de chargement de Comment charger des fichiers HTML externes à laide de la méthode de chargement de jQuery est une bibliothèque JavaScript. La méthode de chargement dans Comment charger des fichiers HTML externes à laide de la méthode de chargement de Comment charger des fichiers HTML externes à laide de la méthode de chargement de jQuery peut être utilisée pour charger des fichiers HTML externes. Ainsi, dans cet article, nous verrons comment la méthode de chargement dans Comment charger des fichiers HTML externes à laide de la méthode de chargement de Comment charger des fichiers HTML externes à laide de la méthode de chargement de jQuery charge les fichiers HTML externes.

Comment charger des fichiers HTML externes à laide de la méthode de chargement de Comment charger des fichiers HTML externes à laide de la méthode de chargement de jQuery

Tout d'abord, jetons un coup d'œil à Qu'est-ce que la charge ?

load peut être utilisé lors de la lecture de contenu écrit sur un autre HTML.

Par exemple, lorsque certaines barres de menus sont partagées, il sera difficile d'écrire une barre de menus sur chaque page. Dans ce cas, vous pouvez utiliser la méthode de chargement de Comment charger des fichiers HTML externes à laide de la méthode de chargement de Comment charger des fichiers HTML externes à laide de la méthode de chargement de jQuery pour lire les menus des autres pages. , afin que le code implémenté ne soit pas redondant.

Ensuite, regardons Comment utiliser la méthode de chargement pour charger un fichier HTML externe ?

En supposant que vous ayez un en-tête écrit dans le fichier header.html, si vous lisez "sample.html" en tant que fichier externe, vous avez besoin du script suivant. 

$(function(){
  $("#cover").load("header.html");
});

De plus, le code HTML ci-dessus est chargé à la position "id" définie dans "sample.html". Veuillez noter que « header.html » et « sample.html » sont actuellement des fichiers différents.

Dans "sample.html", Comment charger des fichiers HTML externes à laide de la méthode de chargement de Comment charger des fichiers HTML externes à laide de la méthode de chargement de jQuery peut ne pas fonctionner même si "header.html" est spécifié.

Par conséquent, la description de "Hader.html" n'est pas "sample.html", mais directement dans "Hample.html".

Regardons un exemple spécifique

Le code est le suivant

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery-3.3.1.min.js">
      
    </script>
    <script src="sample.js" type="text/javascript"></script>
    <title>Comment charger des fichiers HTML externes à laide de la méthode de chargement de Comment charger des fichiers HTML externes à laide de la méthode de chargement de jQuery</title>
  </head>
  <body>
    <div id="cover">
      <div id="section1"></div>
      <div id="section2"></div>
    </div>
  </body>
</html>

HTML

<h1>header.html的标题</h1>

JavaScript

$(function(){
  $("#cover").load("header.html");
});

L'effet de l'opération est le suivant

Le contenu de "header.html" peut être reflété dans "sample .html".

Comment charger des fichiers HTML externes à laide de la méthode de chargement de Comment charger des fichiers HTML externes à laide de la méthode de chargement de jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Introduction aux différences entre let, var et const en JavaScript et leurs scénarios d'applicationArticle suivant：Introduction aux différences entre let, var et const en JavaScript et leurs scénarios d'application

Articles Liés

Voir plus