vue项目使用iframe标签引入HTML页面,并实现数据交互
【摘要】
文章目录
1、引入路径2、vue中获得数据3、html文件中存储数据
1、引入路径
首先将要引入的HTML文件、CSS文件和JS文件放在程序的public文件夹下面
在使用ifr...
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>
欢迎阅读~
文章来源: blog.csdn.net,作者:张艳伟_Laura,版权归原作者所有,如需转载,请联系作者。
原文链接:blog.csdn.net/Laura__zhang/article/details/120654879
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)