返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue嵌入本地iframe文件并获取某元素的值方式
  • 213
分享到

vue嵌入本地iframe文件并获取某元素的值方式

2024-04-02 19:04:59 213人浏览 薄情痞子
摘要

目录Vue嵌入本地iframe并获取某元素的值vue使用iframe并获得其domvue嵌入本地iframe并获取某元素的值 当我们需要在vue中使用其他模块或者其他地方的一些htm

vue嵌入本地iframe并获取某元素的值

当我们需要在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元素的值
			}

vue使用iframe并获得其dom

在vue组件中获取iframe的dom

在获取dom之前需要先确定iframe是否加载完成

<iframe id="displaypdfIframe" :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();

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue嵌入本地iframe文件并获取某元素的值方式

本文链接: https://lsjlt.com/news/167431.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作