将整个html页面嵌入到Vue.js模板中
将整个html页面嵌入到Vue.js模板中
提问于 2020-04-20 11:49:22
首先，请原谅我的英语，我用的是翻译。
我有一个具有单页路径结构( Vue.js )的项目(SPA)，它是典型的具有主要组件的反应性框架，其中我创建了导航和页脚，并在相应的路径调用中使用<router-view></router-view>创建了它们。
所发生的情况是，我需要在项目中引入一个包含外部代码的页面，它不能与Vue.js混合，因为它有太多的css，太不兼容，太广泛，无法让它一起工作。因此，我想看看您是否可以在模板本身中输入对整个外部html页面的调用，这通常是用Iframe完成的。
他们提供的第一件事是带有简单标签的Iframe本身：
<template>
<iframe src="htmlexterno.html"></iframe>
</template>但是它没有起作用，据我所见，如果它与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>但对我来说也不管用。
然后，在这个问题的答案的帮助下，我让它加载互联网urls，但是htmlexterno.html是一个本地项目，对我不起作用。
我做的最后一件事是这样做的，但只有当我放置一个互联网网址(不是本地的)时，它才能起作用：
<template>
<iframe :src="ruta"></iframe>
</template>
<script>
export default {
data: () => ({
ruta: 'htmlexterno.html'
})
}
</script>如果有人能帮我我会很感激的。
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-04-20 15:36:36
<iframe src="htmlexterno.html"></iframe>
我注意到你在尝试加载本地文件。尝试替换该文件的URL或读取静态资产处理。
P/S加载iframe是基本的HTML内容，所以Vue肯定会更多。
Stack Overflow用户
发布于 2020-04-20 12:28:06
不管是谁告诉你Vue与<iframe>不兼容，他对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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61330855
复制
相似问题
将整个页面重定向到vue.js中的text/html
将swf嵌入到html页面
如何将整个html文件嵌入到JS中
如何将代码作为HTML嵌入到vue.js中
将整个HTML页面存储到jQuery变量中
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
