Nuxt3中iframe内样式与脚本泄漏至父页面的解决方法

你当前的问题根源在于没有将iframe内容作为独立的路由页面处理，Nuxt3会把非路由组件的.vue文件打包进主应用，导致其样式和脚本直接作用于父页面上下文，而非隔离在iframe环境中。以下是具体解决步骤：

1. 将iframe内容设为独立路由页面 #

把iframe.vue放到Nuxt的pages目录下，让Nuxt将其识别为独立的路由页面（访问路径为/iframe），这样它会拥有独立的执行上下文，不会和父页面共享样式与脚本。

2. 启用样式隔离（可选但推荐） #

在iframe页面的样式标签上添加scoped属性，进一步确保样式仅作用于当前页面内的元素，避免意外泄漏。

修正后的代码示例 #

index.vue #

<template>
  <div>This is index page content!</div>
  <iframe src="/iframe"></iframe>
</template>

pages/iframe.vue #

<script setup>
console.log('Hello World inside iframe!');
</script>

<template>This is iframe content.</template>

<style scoped>
* {
  color: red;
}
</style>

这样修改后，iframe的红色样式只会应用到自身内容，控制台的日志也只会来自iframe的独立上下文，父页面将不受影响。

内容的提问来源于stack exchange，提问作者CMTV