vue项目使用iframe标签引入HTML页面,并实现数据交互

举报
Laura_张 发表于 2022/08/27 00:50:47 2022/08/27
【摘要】 文章目录 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

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。