Comment JavaScript surveille les pages imbriquées

Avec le développement des applications Web, de plus en plus de sites Web commencent à utiliser des pages imbriquées pour présenter des données, comme l'imbrication d'une iframe pour afficher le contenu d'un autre site Web. Dans ce cas, comment écouter efficacement les événements des pages imbriquées en JavaScript ?

Tout d’abord, nous devons comprendre quelques concepts de base. Dans le développement Web, un site Web peut contenir plusieurs pages, et chaque page peut contenir plusieurs iframes (frames en ligne). Si nous voulons écouter les événements de la page imbriquée en JavaScript, nous devons d'abord obtenir l'élément iframe où se trouve la page imbriquée.

Il existe de nombreuses façons d'obtenir des éléments iframe, la plus courante consiste à utiliser la méthode getElementById() ou la méthode querySelector() de l'objet document. Par exemple, si nous voulons obtenir l'élément iframe avec l'identifiant "myframe", nous pouvons utiliser le code suivant :

var iframe = document.getElementById("myframe");

Après avoir obtenu l'élément iframe, nous pouvons écouter ses événements. Vous trouverez ci-dessous plusieurs événements iframe courants et les méthodes de surveillance correspondantes.

1. Événement de chargement terminé

Lorsque la page dans l'iframe est chargée, l'événement de chargement sera déclenché. Vous pouvez utiliser le code suivant pour écouter cet événement :

iframe.onload = function() {
  // iframe中的页面已经加载完成
};

2. Événement d'échec de chargement de page

Si la page dans l'iframe ne se charge pas, l'événement d'erreur sera déclenché. Vous pouvez utiliser le code suivant pour écouter cet événement :

iframe.onerror = function() {
  // iframe中的页面加载失败
};

3. Événement de changement de taille du contenu

Parfois, la taille du contenu dans l'iframe peut changer, par exemple, un nouveau contenu est ajouté à la page ou certains éléments sont supprimés. Vous pouvez utiliser le code suivant pour écouter cet événement :

iframe.contentWindow.addEventListener("resize", function() {
  // iframe中的内容大小已经发生变化
});

Il est à noter que puisque le contenu de l'iframe est une page d'un autre site Web, nous devons utiliser l'objet contentWindow pour obtenir les éléments DOM de la page. De plus, étant donné que l'événement resize est implémenté différemment selon les navigateurs, il est préférable d'utiliser la méthode addEventListener() pour écouter cet événement.

4. Événement de défilement de page

Si la page dans l'iframe prend en charge le défilement, vous pouvez utiliser le code suivant pour écouter les événements de défilement :

iframe.contentWindow.addEventListener("scroll", function() {
  // iframe中的页面已经发生滚动
});

Semblable à l'événement resize, nous devons également utiliser l'objet contentWindow pour obtenir le Éléments DOM dans la page.

En plus des événements ci-dessus, de nombreux autres événements peuvent être surveillés. Le type d'événement correspondant doit être sélectionné en fonction des besoins spécifiques.

En général, grâce aux méthodes ci-dessus, nous pouvons surveiller efficacement divers événements dans des pages imbriquées. Bien entendu, avant de procéder à la surveillance, nous devons nous assurer que le site Web sur lequel nous nous trouvons n'utilise pas la technologie iframe sandbox pour interdire les scripts dans les iframes. De plus, les restrictions de la politique de même origine doivent également être prises en compte. Si la page de l'iframe n'appartient pas au même nom de domaine que la page parent, son contenu n'est pas directement accessible.

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!