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

---

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>
					
				

欢迎阅读~