vue项目中修改iframe嵌入的css样式

木木木华

已于 2023-09-19 17:53:41 修改

阅读量6.9k

点赞数

分类专栏： vue 文章标签： vue.js iframe

于 2023-06-19 10:35:44 首次发布

本文链接：https://blog.csdn.net/catascdd/article/details/131281843

版权

vue 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

需求：

使用iframe嵌入一个外部链接，并修改该页面中的css样式。

参考文章：在Vue中优雅的更改iframe嵌入页面的样式

实现逻辑：

若要实现能够修改iframe中嵌入页面的样式，首先要保证嵌入的链接和当前页面是同域的，若不是,需要先做跨域配置，具体可参考我的另一篇文章：vue跨域实现：proxy配置

这篇文章主要讲述对iframe中css样式的修改：

页面结构代码：

<iframe
        id="iframeId"
        :src="iframeUrl"
        width="100%"
        height="100%"
        frameborder="0"
        @load="loadFrame"
      />

主要方法：

methods: {
    // iframe加载完成后的回调函数
    loadFrameFn() {
      const iframe = document.getElementById("iframeId");
      const body = iframe.contentWindow.document.body;
      const cssLink = document.createElement("link");
      cssLink.href = "/vue项目名称/iframe-css/iframe.css";
      cssLink.rel = "stylesheet";
      cssLink.type = "text/css";
      body.appendChild(cssLink);
    },
  },

其中iframe.css为自己创建的css文件，内容为我们想要实现的css样式，该文件需要放置在静态资源文件中。我在public文件中创建了一个iframe-css文件夹，用来放置该文件