Maison > interface Web > js tutoriel > Comment puis-je accéder aux fonctions JavaScript dans un iFrame à partir de la page parent ?

Comment puis-je accéder aux fonctions JavaScript dans un iFrame à partir de la page parent ?

Susan Sarandon
Libérer: 2024-12-23 21:52:20
original
232 Les gens l'ont consulté

How Can I Access JavaScript Functions in an iFrame from the Parent Page?

Accéder au code JavaScript dans un iFrame à partir de la page parent

Invoquer du code JavaScript dans un iFrame intégré à partir de la page parent peut être un défi courant . Bien que la possibilité d'interagir avec la page parent à partir de l'iFrame soit simple, l'accès aux fonctions définies dans l'iFrame à partir de la page parent nécessite une approche différente.

Solution :

Pour y parvenir, vous pouvez utiliser la technique suivante :

  1. Identifier l'ID et la fonction de l'iFrame Nom :
    Assurez-vous que votre iFrame possède un identifiant unique et que la fonction que vous souhaitez appeler porte un nom spécifique.
  2. Obtenez la fenêtre de contenu :
    À l'aide de la méthode document.getElementById(), ciblez l'iFrame spécifique par son ID et récupérez son contentWindow property :

    const contentWindow = document.getElementById('iFrameID').contentWindow;
    Copier après la connexion
  3. Invoquer la fonction :
    Une fois que vous avez la fenêtre de contenu de l'iFrame, vous pouvez invoquer la fonction souhaitée en appelant :

    contentWindow.functionName();
    Copier après la connexion

Par exemple, si l'ID de votre iFrame est "targetFrame" et que le La fonction que vous souhaitez appeler est targetFunction(), vous utiliseriez :

document.getElementById('targetFrame').contentWindow.targetFunction();
Copier après la connexion

Méthode alternative :

Vous pouvez également accéder à la fenêtre de contenu d'un iFrame en utilisant window.frames :

 // This option may not work in the latest versions of Chrome and Firefox.
window.frames[0].frameElement.contentWindow.targetFunction();
Copier après la connexion

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!

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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal