vue 设置iframe的内部样式

在没有加载完iframe时,直接使用document去获取元素是获取不到iframe内部的元素;就算加载完,也是难以获取不到内部的元素,何况还要设置样式。下面直接上代码:

<template>
	<iframe :src="data" frameborder="0" width="100%" height="100%" id="iframeBox" ref="iframe" @load="iframeLoad">
		<div id="myselected">myselected</div>
	</iframe>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const data = ref('url'); // iframe的src
let timer; // 定时器
 // 加载完成
const iframeLoad = (event) => {
	// 设置定时器,获取dom
  timer = setInterval(function() {
    const dom = document.getElementById('iframeBox').contentDocument.querySelector('#myselected'); // 获取dom元素
    if (dom) {
      dom.style.display = ; // 样式修改
      clearInterval(timer); // 设置完样式后,清除定时器
    }
  }, 1000);
}
</script>

你可能感兴趣的:(vue.js,javascript,前端)