vue3项目中修改Iframe引入内容的css样式

张不大了

于 2024-05-16 16:35:47 发布

阅读量207

点赞数 3

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46054156/article/details/138966559

版权

vue 专栏收录该内容

54 篇文章 0 订阅

订阅专栏

1，需求：

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

2，实现逻辑：

若要实现能够修改iframe中嵌入页面的样式，首先要保证嵌入的链接和当前页面是同域的，若不是,需要先做跨域配置。

3，具体实现方法

页面结构代码：

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

js主要实现方法：

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

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