iframe嵌套vue页面打开空白

作者：迷失未来发布日期:2025-08-23 浏览:82

<!DOCTYPE html>
<html>
<head>
    <title>iframe嵌套Vue页面示例</title>
</head>
<body>
    <!-- 这是一个包含Vue应用的父页面 -->
    <div id="app">
        <h1>这是父页面</h1>
        <iframe src="./child.html" width="600" height="400"></iframe>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        });
    </script>
</body>
</html>

<!-- child.html 文件内容 -->
<!DOCTYPE html>
<html>
<head>
    <title>子页面 - Vue应用</title>
</head>
<body>
    <div id="child-app">
        <h1>这是子页面中的Vue应用</h1>
        <p>{{ message }}</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#child-app',
            data: {
                message: 'Hello from child Vue app!'
            }
        });
    </script>
</body>
</html>

解释说明：

父页面 (index.html):
- 包含一个 iframe，其 src 属性指向子页面 (child.html)。
- 父页面本身也包含了一个简单的 Vue 实例。
子页面 (child.html):
- 子页面中也有一个独立的 Vue 实例。
- 当在父页面中通过 iframe 加载子页面时，子页面中的 Vue 应用会正常渲染。
常见问题:
- 如果子页面打开为空白，可能是因为浏览器的安全策略（如CORS）阻止了跨域加载，或者子页面中的 JavaScript 代码执行出错。
- 确保父子页面在同一域名下，或正确配置跨域资源共享（CORS），以避免安全问题导致的空白页面。
调试建议:
- 检查浏览器控制台是否有报错信息。
- 确认 child.html 文件路径是否正确。
- 确认子页面中的 Vue 实例是否正确初始化。

上一篇：vue withdefaults

下一篇：vue webpack配置