在Vue中引入外部css文件修改iframe嵌入页面的样式

最新推荐文章于 2025-02-25 14:30:00 发布

神经彬

最新推荐文章于 2025-02-25 14:30:00 发布

阅读量4.2k

点赞数 3

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/bin_322/article/details/122173465

前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在Webpack配置中将CSS文件放置于`static`目录下，并通过`link`标签动态引入iframe页面，详细阐述了文件路径调整及HTML动态插入`link`标签的过程，确保项目打包后能正确加载样式。

1、将css文件放入public/static/css文件夹中

public目录下的所有文件编译之后都会拷贝到根目录，我们要想把这个文件夹下面的文件编译之后放到static下面，就只需要将public下的文件，都放到public/static文件夹下面，这样编译之后，会把所有静态文件都放到static文件夹下面。

2、添加link标签引入css文件

// 获取iframe html文件
const doc = this.$refs.iframe.contentWindow.document
// 获取iframe html文件head
const head = doc.getElementsByTagName('head')
// 新建link标签
const linkTag = document.createElement('link')
// link标签引入css文件的地址
linkTag.href = '/static/css/schedule_task.css'
// 设置link标签属性
linkTag.setAttribute('rel', 'stylesheet')
// 设置link标签属性
linkTag.setAttribute('type', 'text/css')
// 将link标签添加进iframe html文件的head里
head[0].append(linkTag)

项目打包后，项目dist/static/css文件夹中会有事先放在public文件夹下的css文件，href会链接读取到这个css文件，就可以成功修改iframe页面样式了。