Comment charger des fichiers HTML externes à l'aide de la méthode de chargement de jQuery-js tutoriel-php.cn

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

不言

Libérer： 2018-12-12 17:03:24

original

8867 Les gens l'ont consulté

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");
});

Copier après la connexion

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>

Copier après la connexion

HTML

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

Copier après la connexion

JavaScript

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

Copier après la connexion

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!