Analyser la méthode d'implémentation de Vue appelant la méthode Iframe

Dans Vue, si nous voulons appeler la méthode Iframe, nous devons faire attention à certains détails. Étant donné qu'Iframe imbrique la page entière dans un cadre, nous devons trouver le bon moyen d'accéder aux éléments DOM à l'intérieur de l'Iframe. Ci-dessous, je vais vous présenter étape par étape comment implémenter Vue pour appeler la méthode Iframe.

Tout d'abord, nous devons créer une balise Iframe dans Vue. Supposons que notre code Iframe soit le suivant :

<iframe id="myIframe" src="./myIframe.html"></iframe>

Nous pouvons voir que l'ID de l'Iframe est "myIframe", et nous pouvons utiliser cet ID pour accéder aux éléments DOM à l'intérieur de l'Iframe dans Vue.

Ensuite, nous devons définir une méthode dans Vue pour obtenir l'élément DOM à l'intérieur de l'Iframe via l'ID de l'élément "myIframe". Le code est le suivant :

methods: {
    getIframeContent() {
      return document.getElementById('myIframe').contentWindow.document;
    },
}

Cette méthode renvoie un objet document à l'intérieur de l'Iframe. Nous pouvons utiliser cet objet pour accéder aux éléments DOM dans le contenu de l'Iframe. Maintenant nous pouvons appeler cette méthode pour obtenir l'élément DOM à l'intérieur de l'Iframe, le code est le suivant :

created() {
    const iframeContent = this.getIframeContent();
}

Dans l'Iframe, nous définissons une méthode nommée "myFunction", que nous voulons appeler dans Vue. Le code est le suivant :

<button @click="callMyFunction">Call myFunction</button>

Lorsque nous cliquons sur le bouton "Appeler maFonction" dans Vue, nous devons appeler la méthode "myFunction" à l'intérieur de l'Iframe. Le code est le suivant :

methods: {
    callMyFunction() {
      const iframeContent = this.getIframeContent();
      iframeContent.getElementById('myFunction').contentWindow.myFunction();
    }
}

Dans le code ci-dessus, nous accédons à l'élément "myFunction" via l'objet document à l'intérieur de l'Iframe et appelons la méthode contentWindow de l'élément. Cette méthode renvoie l'objet window à l'intérieur de l'Iframe. On peut appeler directement la méthode "myFunction" sur cet objet.

De cette façon, nous avons terminé le processus d'appel de la méthode Iframe dans Vue. Il convient de noter que l'Iframe doit être situé sous le même nom de domaine, sinon l'accès pourrait échouer en raison de problèmes inter-domaines.

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!