将整个 html 页面嵌入到 Vue.js 模板中

Question

首先，请原谅我的英语，我正在使用翻译。

我有一个 Vue.js 项目，它具有典型的反应式框架的单页路径结构 (SPA)，我在其中创建导航和页脚以及在对应路径调用<router-view></router-view>

发生的情况是，我需要在项目中引入一个带有外部代码的页面，我无法与 Vue.js 混合，因为它有太多的 css，太不兼容和太广泛，无法使其协同工作。所以我想看看你是否可以在模板本身中输入对整个外部 html 页面的调用，这通常是用 iframe 完成的。

他们提供的第一件事是带有简单标签的 iframe 本身：

<template>
<iframe src="htmlexterno.html"></iframe>
</template>

但它不起作用，而且从我所看到的情况来看，Iframe 似乎与 Vue.js 不兼容

然后在网上搜索我找到了这段代码：

<template>
<div v-html="varhtml"></div>
<template>
<script>
export default {
data: {
    varhtml: '<p>Loading...</p>'
},

ready() {
    this.$http.get('htmlexterno.html').then(response => {
        this.varhtml = response.data;
    });
}
}
</script>

但这对我也不起作用。

然后感谢这个问题的答案的帮助，我得到了它来加载互联网网址，但是 htmlexterno.html 是一个本地项目，对我不起作用。

我做的最后一个是这个，但它只有在我输入一个互联网网址（不是本地）时才有效：

<template>
    <iframe :src="ruta"></iframe>
</template>
<script>
export default {
    data: () => ({
        ruta: 'htmlexterno.html'
    })
}
</script>

如果有人可以帮助我，我将不胜感激。

Answer 1

<iframe src="htmlexterno.html"></iframe>

我注意到您正在尝试加载本地文件 iframe。尝试替换该文件的 URL 或改为阅读 Static Assets Handling。

P/S 加载 iframe 是基本的 HTML 内容，因此 Vue 肯定不止于此。

Answer 2

告诉你 Vue 与 <iframe>s 不兼容的人对 Vue 了解不多。这是一个简单的例子：

new Vue({
  el: '#app',
  data: () => ({
    source: 'https://en.wikipedia.org/wiki/Main_Page'
  })
})

#app, #app iframe {
  height: 100vh;
  width: 100vw;
  border: none;
  box-sizing: border-box;
}
body {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <iframe :src="source"></iframe>
</div>