vue中修改iframe内部样式

在Vue中修改iframe内部样式，可以通过以下步骤进行操作。首先，你需要在Vue组件中添加一个iframe元素，设置其id和src属性。例如，你可以使用以下代码：

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

然后，在Vue组件的methods中定义一个loadFrame方法，用于在iframe加载完成后进行操作。在loadFrame方法中，你可以获取到iframe元素，并操作其内部文档的样式。例如，你可以使用下面的代码：

methods: {
  loadFrame() {
    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);
  },
},

在该方法中，通过getElementById方法获取到iframe元素，然后获取到其内部文档的body元素，并创建一个link标签用于引入样式表。你可以设置link标签的href属性为你要引入的样式表的路径，然后将link标签添加到iframe的body元素中。这样，当iframe加载完成后，样式表就会被应用到其中。<em>1</em><em>2</em><em>3</em>
#### 引用[.reference_title]
- *1* *2* [vue项目中修改iframe嵌入的css样式](https://blog.csdn.net/catascdd/article/details/131281843)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item]
- *3* [在Vue中引入外部css文件修改iframe嵌入页面的样式](https://blog.csdn.net/bin_322/article/details/122173465)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}} ] [.reference_item]
[ .reference_list ]