Une brève analyse de plusieurs façons d'obtenir des éléments ou des données de page parent à l'aide de jquery

jQuery est une bibliothèque JavaScript couramment utilisée car elle simplifie le développement de nombreuses tâches telles que la traversée de documents HTML et la gestion d'événements.

Dans certains cas, JavaScript doit communiquer avec l'iframe ou la page parent, puis il doit obtenir les éléments ou les données de la page parent. Voici plusieurs méthodes pour obtenir des éléments ou des données de la page parent.

1. Objet parent

La page parent peut utiliser l'objet parent pour accéder à la page actuelle, et la page enfant peut également accéder à la page parent via window.parent. Utilisez parent pour obtenir tous les éléments et attributs de la page parent. En supposant qu'il existe une page parent qui contient un élément iframe nommé myIframe, la page enfant peut utiliser le code suivant pour obtenir toutes les balises h1 de la page parent :

var h1s = parent.$("h1");

2. objet window.top

objet top peut également être utilisé pour accéder à la page parent. Il donne accès à toute la hiérarchie des pages, à travers laquelle toute la fenêtre est accessible. Vous pouvez utiliser top pour accéder aux éléments et attributs de la page parent.

Par rapport au parent, le principal avantage de l'utilisation de top est inter-domaines. Si la page parent et la page enfant ont des noms de domaine différents, utilisez top pour contourner les restrictions de sécurité inter-domaines.

var h1s = window.top.$("h1");

3. Utiliser la méthode postMessage

postMessage est une nouvelle méthode introduite dans HTML5, qui est utilisée pour transmettre en toute sécurité des messages entre deux fenêtres. Lors de l'utilisation de la méthode postMessage, la page enfant peut envoyer des messages à la page parent et la page parent peut écouter ces messages.

Code de sous-page :

window.parent.postMessage("Hello from iframe!", "*");

Dans la page parent, vous pouvez écouter les messages et obtenir des éléments ou des données dans la page parent selon vos besoins :

window.addEventListener("message", function(event) {
  if (event.source != window.parent) return;

  // 获取消息的内容
  var data = event.data;

  // 在父页面中查找h1元素
  var h1s = $('h1', event.source.document);
}, false);

4. Utilisez la propriété window.opener (fenêtre pop-up uniquement)

Si l'enfant La page s'ouvre dans une fenêtre contextuelle et l'objet de la fenêtre parent ouverte est accessible à l'aide de la propriété window.opener.

var h1s = window.opener.$("h1");

En bref, quelle que soit la méthode utilisée, l'obtention d'éléments ou de données de page parent nécessite des autorisations inter-domaines. Lorsque vous utilisez des fonctionnalités inter-domaines, assurez-vous de mettre en œuvre la sécurité et de suivre les meilleures pratiques.

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!