Iframeメソッドを呼び出すVueの実装方法を解析する

Vue で Iframe メソッドを呼び出す場合は、いくつかの詳細に注意する必要があります。 Iframe はページ全体をフレーム内にネストするため、Iframe 内の DOM 要素にアクセスする正しい方法を見つける必要があります。以下では、Vue を実装して Iframe メソッドを呼び出す方法をステップバイステップで紹介します。

まず、Vue で Iframe タグを作成する必要があります。 Iframe コードが次のとおりであるとします。

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

Iframe の ID が「myIframe」であることがわかり、この ID を使用して Vue の Iframe 内の DOM 要素にアクセスできます。

次に、「myIframe」要素の ID を通じて Iframe 内の DOM 要素を取得するメソッドを Vue で定義する必要があります。コードは次のとおりです:

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

このメソッドは、Iframe 内のドキュメント オブジェクトを返します。このオブジェクトを使用して、Iframe コンテンツ内の DOM 要素にアクセスできます。これで、このメソッドを呼び出して Iframe 内の DOM 要素を取得できるようになります。コードは次のとおりです:

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

Iframe で、Vue で呼び出したい「myFunction」という名前のメソッドを定義します。コードは次のとおりです。

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

Vue で [Call myFunction] ボタンをクリックすると、Iframe 内の "myFunction" メソッドを呼び出す必要があります。コードは次のとおりです。

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

上記のコードでは、Iframe 内のドキュメント オブジェクトを通じて「myFunction」要素にアクセスし、要素の contentWindow メソッドを呼び出します。このメソッドは Iframe 内の window オブジェクトを返します。このオブジェクトの "myFunction" メソッドを直接呼び出すことができます。

これで、Vue で Iframe メソッドを呼び出す処理が完了しました。 Iframe は同じドメイン名の下に配置する必要があることに注意してください。そうしないと、クロスドメインの問題によりアクセスが失敗する可能性があります。

以上がIframeメソッドを呼び出すVueの実装方法を解析するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。