vue中如何使用iframe

最新推荐文章于 2025-06-08 00:03:24 发布

yiyiyiyi_

最新推荐文章于 2025-06-08 00:03:24 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qiqiyiyi_/article/details/109341950

本文介绍了在Vue项目中如何嵌入和使用iframe，包括HTML结构和JavaScript交互，帮助开发者理解在Vue组件中加载外部页面或应用的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中如何使用iframe

html中

<div class="home_container">
      <iframe id="iframe" style="width:100%;height:100%" src="https://www.baidu.com/" v-cloak />
</div>

js部分

  mounted(){
    // 获取iframe元素 querySelector 返回文档中匹配指定 CSS 选择器的一个元素。
    const iframe = document.querySelector('#iframe')
    // 处理兼容问题
    if (iframe.attachEvent) {
      iframe.attachEvent('onload', function () {
        // iframe加载完毕以后执行操作
        console.log('iframe已加载完毕')
        // iframe加载完毕之后 获取iframe中的元素
        let iframeId = document.getElementById("iframe").contentWindow.document.getElementById("app");
        if(iframeId != null){
          // setAttribute 给元素添加属性
          iframeId.setAttribute('style','background: pink !importent');
        }
      })
    } else {
      iframe.onload = function () {
        // iframe加载完毕以后执行操作
        console.log('iframe已加载完毕')
        let iframeId = document.getElementById("iframe").contentWindow.document.getElementById("app");
        if(iframeId != null){
          iframeId.setAttribute('style','background: pink !importent');
        }
      }
    }
  },