1、引入路径
首先将要引入的HTML文件、CSS文件和JS文件放在程序的public文件夹下面
在使用iframe标签引入路径的时候不要写public,去掉public,直接引入即可(程序打包之后会把public文件下的文件放在根目录)。
<iframe
id="iframe_key"
ref="iframe"
src="/1.键盘布局.html"
frameborder="0"
width="100%"
height="450"
></iframe>
相关属性:
width外部页面的宽度
height外部页面的高度
scrolling是否有滚动条
noresize 属性规定用户无法调整框架的大小
frameborder是否有边框
2、vue中获得数据
mounted(){
localStorage.setItem("keyarticle",'1.键盘布局')
},
methods: {
//点击保存按钮,调用保存方法
clickSave() {
this.save();
},
//是否进行保存
save() {
this.$confirm("确定保存成绩", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
//跳转到主页面
// this.$router.push("/Main");
this.insertPersonResult();
})
.catch(() => {
//停在当前页
});
},
//再来一次
again() {
location.reload();
// this.$router.push("/typingPersonal");
},
//倒计时自动跳转
checkScore(){
clearInterval(this.jumpTimer);
this.$router.push("/Main");
},
},
3、html文件中存储数据
<script>
function MM_jumpMenu(obj) { //v3.0
document.location = obj.value;
var keyarticle= obj.value.split('.html',1)
localStorage.setItem("keyarticle",keyarticle)
console.log(
obj.value
);
}
</script>
<div class="setting">
<select id="jump_menu" onchange="MM_jumpMenu(this)">
<option value="1.键盘布局.html" selected="">1.键盘布局(KeyBoard Layout)
</option>
</select>
</div>
欢迎阅读~