需求：

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

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

实现逻辑：

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

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

页面结构代码：

<iframeid="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文件夹，用来放置该文件