Maison > interface Web > js tutoriel > jQuery 之load, unload, onunload et onbeforeunload - liuyueyue

jQuery 之load, unload, onunload et onbeforeunload - liuyueyue

巴扎黑
Libérer: 2017-06-29 10:38:11
original
4284 Les gens l'ont consulté

 1.load : La méthode jQuery load() est une méthode AJAX simple mais puissante. La méthode load() charge les données du serveur et place les données renvoyées dans l'élément sélectionné.

Syntaxe : $(selector).load(URL,data,callback );

  Le paramètre obligatoire URL spécifie l'URL que vous souhaitez charger.

Le paramètre facultatif data spécifie la requête stringensemble de paires clé/valeur à envoyer avec la requête.

Le paramètre facultatif callback est le nom de la fonction à exécuter une fois la méthode load() terminée.

Voici le contenu du fichier exemple ("demo_test.txt") :

  <h2>jQuery and AJAX is FUN!!!</h2>
  <p id="p1">This is some text in a paragraph.</p>
Copier après la connexion

L'exemple suivant chargera le contenu du fichier "demo_test. txt" dans Dans l'élément

spécifié :

Exemple : $("#p1").load("demo_test.txt");
Vous pouvez également ajouter des sélecteurs jQuery aux paramètres d'URL.

L'exemple suivant charge le contenu de l'élément avec id="p1" dans le fichier "demo_test.txt" dans l'élément

spécifié :

  $("#p1").load("demo_test.txt #p1");
Copier après la connexion

Facultatif Le rappel Le paramètre spécifie la fonction de rappel à autoriser lorsque la méthode load() est terminée. La fonction de rappel peut définir différents paramètres :

  • responseTxt - contient le contenu du résultat lorsque l'appel est réussi

  • statusTXT - Contient le statut de l'appel

  • xhr - Contient l'objet XMLHttpRequest

Le l'exemple suivant sera chargé () Une boîte de dialogue s'affiche une fois la méthode terminée. Si la méthode load() a réussi, "Contenu externe chargé avec succès !" s'affiche, et si elle échoue, un message d'erreur s'affiche :

 $("button").click(function(){

"Contenu externe chargé avec succès !");

 if(statusTxt=="error")

 alert("Erreur : "+xhr.status+": "+xhr .statusText);

  });

 }); 🎜>:

Lorsque l'utilisateur quitte la page, l'événement de déchargement se produit.

Plus précisément, l'événement de déchargement sera émis lorsque les événements suivants se produisent :

Cliquez sur un lien pour quitter la page

  $(window).unload(function(){
     alert("Goodbye!");
  });
Copier après la connexion

Tapez la nouvelle URL dans la barre d'adresse

    Utilisez les boutons Suivant ou Précédent
  • Fermez le navigateur
  • Recharger la page
  • La méthode unload() lie le programme
  • gestionnaire d'événements

    à l'événement de déchargement.

  • La méthode unload() s'applique uniquement aux objets window.

  • 🎜>

Utilisation : object.onbeforeunload = handler Description : L'événement onunload est déclenché lorsque l'utilisateur ferme une page.

Déclenché par :

 
·Lorsque vous cliquez sur Retour, Suivant, Actualiser, l'une des pages d'accueil
 
·Lorsque vous cliquez sur un lien URL vers d'autres pages
 
·Lors de l'appel de l'un des événements suivants : clic, document
écriture, ouverture du document, fermeture du document, fermeture de la fenêtre, fenêtre naviguer, fenêtre NavigateAndFind, remplacement d'emplacement, rechargement d'emplacement, soumission de formulaire
 ·Lorsque vous utilisez window open pour ouvrir une page et transmettre le nom de la fenêtre sur cette page à la page à ouvrir.
 
·Lors de la réaffectation de la valeur de location.href.
 
·Lors de la soumission d'un formulaire avec une action spécifiée via le bouton input type="submit".

Exemple :

  <html xmlns="http://www.w3.org/1999/xhtml" >
  <tête>
    <meta http-equiv= "Content-Type" content="text/html; charset=gb2312" / >
    <title>onunload测试</title>
    <script>
      fonction checkLeave(){
        alerte("欢迎下次再来!");
      }
    </script>
  < ;/head>
  <body onunload="checkLeave()"></corps>
  </html>

  

  4.onbeforeunload:

  说明:目前三大主流浏览器中firefox和IE®支持onbeforeunload事件,opera尚未支持。
  用法:
  ·object.onbeforeunload = handler
  ·
  描述:
  事件触发的时候弹出一个有确定和取消的对话框,确定则离开页面,取消则继续待在本页。handler可以设一个返回值作为该对话框的显示文本。

Déclenché par :
·Fermez la fenêtre du navigateur
·Lorsque vous accédez à d'autres pages via la barre d'adresse ou les favoris
·Lorsque vous cliquez sur Retour, Suivant, Actualiser ou sur l'une des pages d'accueil
 ·Lorsque vous cliquez sur un lien URL vers d'autres pages
·Appelez l'un des éléments suivants Événements : clic, écriture de document, ouverture de document, fermeture de document, fermeture de fenêtre, navigation dans la fenêtre, fenêtre NavigateAndFind, remplacement d'emplacement, rechargement d'emplacement, soumission de formulaire
 ·Lors de l'utilisation de la fenêtre ouverte pour ouvrir une page, et passez le nom de la fenêtre de cette page à la page à ouvrir.
 ·Lors de la réaffectation de la valeur de location.href.
 ·Lors de la soumission d'un formulaire avec une action spécifiée via le bouton input type="submit".
 Peut être utilisé dans les éléments suivants :
 ·BODY, FRAMESET, window
 Support de plateforme :
IE4+/Win, Mozilla 1.7a+, Netscape 7.2+, Firefox0.9+
 Exemple :

  <html xmlns="http://www.w3.org/1999/xhtml">
  <tête>
    <meta http-equiv="Content-Type" content="text/html;  charset=gb2312" />
    <title>onbeforeunload测试</title>
<script>
      fonction checkLeave(){
            event.returnValue="确定离开当前页面吗?";
      }
    </script>
  </ tête>
  <corps onbeforeunload="checkLeave()"> ;</corps>
  </html>

  但是onbeforeunload有个小毛病,就是页面刷新时,他还是会调用到onbeforeun charge, 为什么?

 

   究竟怎么解决刷新不调用onbeforeunload呢?

window.onbeforeunload = function(){
var n = window.event.screenX - window.screenLeft;
var b = n 🎜>20 if(b && window.event.clientY > window.event.altKey) {
alert(" est fermé plutôt que rafraîchi" = "Fermer ?"; }else
{
alert("est rafraîchissant plutôt que de fermer ");                                              🎜>




Remarque : les deux derniers événements de cet article sont compilés sur : http://www.cnblogs.com/fredlau/archive/2009 /06/10/1500490.html, Merci à l'auteur original

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal