Comment obtenir le contenu d'un iFrame en utilisant du JavaScript pur ?

Obtenir le contenu du corps d'un iFrame en JavaScript pur

JavaScript permet la manipulation d'éléments dans le document HTML actuel. Cependant, récupérer le contenu d’une iframe nécessite une approche différente. Cet article propose une solution complète en JavaScript pur, suivant les méthodes utilisées par le framework jQuery.

Obtention de l'élément iFrame

Pour commencer, identifiez l'iframe cible à l'aide de son Sélecteur ID ou CSS :

var iframe = document.getElementById('id_description_iframe');

Accès à l'iFrame Contenu

Maintenant, pour accéder au contenu de l'iframe, vous pouvez utiliser une solution employée par jQuery :

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

Dans Internet Explorer, la propriété contentWindow est utilisée, tandis que d'autres les navigateurs préfèrent contentDocument. Cette condition OU garantit la compatibilité.

Sélection d'éléments dans l'iFrame

Avec l'accès au document iframe, vous pouvez sélectionner des éléments spécifiques en utilisant les méthodes habituelles :

var iframeContent = iframeDocument.getElementById('frameBody');

Invocation de fonctions et accès aux variables

Pour interagir avec les fonctions et les variables définies dans le contexte JavaScript de l'iframe, accédez à son élément window :

var iframeWindow = iframe.contentWindow;

// Call global functions
var myVar = iframeWindow.myFunction(param1 /*, ... */);

Considérations

Notez que toutes ces opérations nécessitent le respect de la politique de même origine. Si un accès cross-origin est nécessaire, des mesures spécifiques sont nécessaires, telles que la modification de l'en-tête Content-Security-Policy.

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!