vue中 iframe 引入 本地静态html文件,vue-cli2与vue-cli3引用的差异
vue中 iframe 引入 本地静态html文件,vue-cli2与vue-cli3引用的差异。引言Vue-cli 2.0 构建的项目引用Vue-cli 3.0 构建的项目引用不考虑项目构建版本的方法1.如果你是webpack工程师,你就自己配置打包方式。2.使用require() 引入总结引言 在写个人网站的时候,需要用到 iframe 引用本地静态的 html 文件,发现引用方式的一些差异
vue中 iframe 引入 本地静态html文件,vue-cli2与vue-cli3引用的差异。
引言
在写个人网站的时候,需要用到 iframe
引用本地静态的 html
文件,发现引用方式的一些差异,在此分享一下。
Vue-cli 2.0 构建的项目引用
在vue-cli 2.0 构建的项目中,如果要使用 iframe
引用本地的静态 html
文件,静态文件需要放置在和 src
同级的文件加夹 static
中。
如下图:
在使用 iframe
的地方直接写 “相对路径” 就行,如下图:
这里还是需要解释一下,这里的路径,在打包后不会变化。都是根据打包后的路径查找静态文件,因此上方用 “相对路径” 描述并不准确,而是打包后的 “相对路径”,看下图就明白了。
这是 打包后的文件层级关系
这里我写了很多 ../../../
,最后发现真实的引用路径还是 http://localhost:8080/static/blog.html
,因为向上查找已经到根目录了,所以不管写多少个../
,实际路径还是http://localhost:8080/static/blog.html
,因此 下方路径直接写 ./static/blog.html
也是一样的,根据上方打包后的层级关系对照一下就明白了。
Vue-cli 3.0 构建的项目引用
在Vue-cli 3.0 构建的项目中使用 iframe
引用本地静态 html
文件,和 2.0基本一样,唯一的区别在于,静态html
文件不是放置在 src
同级的文件夹中,而是放在 public
文件夹下。
如下图:
当然,也可以不用放在 static
文件夹下。public
文件下的文件(包括文件夹),打包后的层级不会发生变化,因此可以自定义名称。
不能改变的是,只能放在public
文件夹下。
其它注意点与Vue-cli 2.0 构建的项目相同,就不一一赘述。
那有没有随意放在其它层级还能使用的方法,而且不需要考虑Vue-cli 2.0 还是 3.0 构建的项目,其实也是有的。
不考虑项目构建版本的方法
1.如果你是webpack工程师,你就自己配置打包方式。
好吧,这是废话
2.使用require() 引入
html
文件我放在和 vue
文件同级,如下:
Home.vue
中这样写
<template>
<div class="home">
<button @click="clickHandle">switch</button>
<iframe ref="iframe" frameborder="0" v-if="ifIframe"></iframe>
</div>
</template>
export default {
name: "Home",
data() {
return {
ifIframe: true,
iframeData: require("./blog.html")
// src: "./static/blog.html"
};
},
mounted() {
this.$refs.iframe.contentDocument.documentElement.innerHTML = this.iframeData;
},
methods: {
clickHandle() {
// 1.通过DOM操作切换数据源信息
// 因可能在iframe内部点击了外链信息,src会发生改变,可能就不属于同源。不同源外部就无法操作iframe内部DOM,因此使用v-if 删除DOM后再显示清空src信息
// 也可以使用其他方式清除,比如用v-bind 绑定src
// this.ifIframe = false;
this.$refs.iframe.removeAttribute("src");
this.$nextTick(() => {
// this.ifIframe = true;
this.$nextTick(() => {
this.$refs.iframe.contentDocument.documentElement.innerHTML = require("./second.html");
});
});
// 2.切换路径促使切换数据
// this.src = "./static/second.html";
}
}
};
上面就是通过 require()
获取到文件,再给 iframe
的 contentDocument.documentElement.innerHTML
赋值。
这种方式有一点问题就是,不同源的 iframe
无法操作内部 Dom
信息,所以可以使用 removeAttribute
删除 src
再赋值,上方code
中也有描述。
使用这种方式还需要安装html-loader
插件,不然require()
引入的文件无法解析。
使用命令安装:
npm i html-loader --save-dev
再在 vue.config.js
配置,没有这个文件的就自己新建一个,放在最外层。
module.exports = {
chainWebpack: config => {
config.module
.rule("html")
.test(/\.html$/)
.use("html-loader")
.loader("html-loader");
}
};
总结
好了,以上就是在vue 项目使用iframe 引用 本地静态 html
文件的方法。
为了大家更加实际的体会,上方的两个例子写了一个demo 上传到github上了,上面看不懂的,可以直接下载例子参考。
vue-cli2.0 构建的项目使用iframe 引用本地静态html文件的demo
vue-cli3.0 构建的项目使用iframe 引用本地静态html文件的demo
更多推荐
所有评论(0)