Comment puis-je accéder et manipuler le contenu d'une Iframe à l'aide de Javascript ?

Récupérer le contenu d'une Iframe en Javascript

Obtenir le contenu du corps d'une iframe en Javascript nécessite une approche spécifique. Alors que jQuery fournit une méthode simple, Javascript pur offre une solution tout aussi efficace.

L'approche Javascript pure

1. Obtenez l'élément iframe :

   • var iframe = document.getElementById('id_description_iframe');
   • var iframe = document.querySelector('#id_description_iframe');

2. Récupérer le document de l'iframe :

   • var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

Cette approche fonctionne pour la plupart des navigateurs, car elle vérifie d'abord la propriété contentDocument et revient à contentWindow.document pour la compatibilité avec Internet Explorer.

Sélection d'éléments et d'appel de fonctions

Une fois que vous avez le document iframe, vous pouvez utiliser les méthodes Javascript standards pour interagir avec lui :

• Obtenir les éléments par ID : iframeDocument.getElementById('frameBody');
• Utiliser les sélecteurs CSS : iframeDocument. querySelectorAll('#frameBody');
• Récupérer la fenêtre iframe : var iframeWindow = iframe.contentWindow;

• Appeler des fonctions ou accéder à des variables sur la fenêtre iframe :

  • iframeWindow.myVar = window.myVar;
  • var myVar = iframeWindow.maFonction(param1 /*, ... */);

Considérations

N'oubliez pas de prendre en compte la politique de même origine lorsque vous travaillez avec des iframes. Si l'iframe et le document parent proviennent d'origines différentes, des restrictions d'origine croisée peuvent s'appliquer.

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!