vue嵌入本地iframe文件并获取某元素的值方式
短信预约 -IT技能 免费直播动态提醒
vue嵌入本地iframe并获取某元素的值
当我们需要在vue中使用其他模块或者其他地方的一些html页面功能时，我们可以使用iframe去引用html页面
首先我们可以再vue页面中使用标签引用html页面
<template>
<div>
<iframe
name="iframe"
id="iframe"
width="100%"
height="470px"
v-bind:class="lazy" data-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元素的值
}
vue使用iframe并获得其dom
在vue组件中获取iframe的dom
在获取dom之前需要先确定iframe是否加载完成
<iframe id="displayPdfIframe" :class="lazy" data-src="pdfUrl" width="100%" ref="pdfframe"></iframe>
$('#displayPdfIframe').on("load",function(){
vm.iframeWin = vm.$refs.pdfframe.contentWindow
console.log(vm.iframeWin)
})当访问iframe的window时，需要区分当前组件的windows和iframe的windows，所以需要在windows前添加上诉代码中获取的vm.iframeWin
this.textlayer = that.iframeWin.$('.textLayer')
var selection_text = this.iframeWin.window.getSelection().toString();以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
