前提・実現したいこと
Vueの<iframe>内で表示されている要素にアクセスして、クリックイベントなどの関数を追加し、ボタンがクリックされたらページ移動などの操作をしたい
発生している問題・エラーメッセージ
textContent
で要素の中身を確認できることはあるが、(できないときもある)addEventListener
で関数を追加しても、その関数処理が呼ばれない
該当のソースコード
html
1<template> 2 <div> 3 <iframe 4 id="element" 5 ref="iframe" 6 :src="'https://アクセスしたいページ'" 7 /> 8 </div> 9</template>
ts
1 2<script lang="ts"> 3import { defineComponent, ref, watch } from '@nuxtjs/composition-api'; 4 5export default defineComponent({ 6 setup() { 7 const iframe = ref<HTMLIFrameElement>(); 8 9 // iframe要素をwatchする 10 watch(iframe, async (iframe) => { 11 const waitForIframeLoaded = () => 12 new Promise<void>((resolve) => { 13 if (!iframe || !iframe.contentDocument) { 14 return resolve(); 15 } 16 if (iframe.contentDocument.readyState === 'complete') { 17 return resolve(); 18 } 19 iframe.addEventListener('load', () => resolve()); 20 }); 21 await waitForIframeLoaded(); 22 if (!iframe || !iframe.contentDocument) { 23 return; 24 } 25 const { contentDocument } = iframe; 26 27 const handleClick = (event: Event) => { 28 event.preventDefault(); 29 // ここが呼ばれない 30 console.log('叩かれました'); 31 }; 32 // ここは表示されたりされなかったり 33 console.log( 34 '要素はありますか?' + contentDocument.getElementsByClassName('iframe内の要素のクラス名')[0].textContent 35 ); 36 contentDocument.getElementsByClassName('iframe内の要素のクラス名')[0].addEventListener('click', handleClick); 37 }); 38 return { 39 iframe, 40 }; 41 }, 42}); 43</script>
試したこと
-
最初にiframe内のcontentDocumentがそもそも読み込めていないのではと思い、要素自体をwatchして、DOMが
complete
になってから要素へのアクセスを試みる -
CORSでそもそもアクセスできていないことを考えましたが、アクセス許可はされていました
補足情報
vueとNuxtのバージョンは下記の通りです
vue:2.6.12
nuxt/cli:v2.15.8
あなたの回答
tips
プレビュー