当我们需要在vue中使用其他模块或者其他地方的一些html页面功能时,我们可以使用iframe去引用html页面

首先我们可以再vue页面中使用标签引用html页面

<template>
 <div>
  <iframe
   name="iframe"
   id="iframe"
   width="100%"
   height="470px"
   v-bind:src="HtmlPath"
   frameborder="0"
   scrolling="no"
   ref="iframeDom"
  ></iframe>
 </div>
</template>

htmlpath 是本地文件的地址,这边建议放在项目根目录Public下,否则存在一定几率显示空白
在这里插入图片描述
之后再父页面vue里methods写方法

callchild(){
				 let obj1=window.frames["iframe"];//获得对应iframe的window对象
				 obj1.fn() //执行iframe 里的方法
				 console.log(obj1.document.getElementById().value) //获取iframe里定义id元素的值
			}

项目需求,这边记录一下~

Logo

前往低代码交流专区

更多推荐