vue 设置iframe的内部样式

最新推荐文章于 2025-02-27 08:47:22 发布

撒库拉-琳琳

最新推荐文章于 2025-02-27 08:47:22 发布

阅读量619

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45190306/article/details/145307472

版权

在没有加载完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>