在iframe中获取选中的数据/iframe中鼠标事件

最新推荐文章于 2024-07-08 15:34:48 发布

原创最新推荐文章于 2024-07-08 15:34:48 发布 · 2.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #html

vue 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了在Vue项目中如何处理iframe内的鼠标事件，特别是获取选中的文本和图片数据。作者通过监听iframe的onload事件，然后在iframe内容中添加鼠标up事件，实现了获取选中文本和图片的功能。同时，通过自定义oncontextmenu右键事件，结合vue-contextmenujs组件创建了一个右键菜单，允许用户进行反馈操作。代码示例详细展示了这一过程。

我现在的vue项目有个需求是，点击手册时，在显示的手册内容中进行内容的选中，并进行右键生成反馈

在iframe中获取选中的数据

刚写的时候是在iframe标签上写了鼠标的事件，导致没有任何事件没有任何反应，也是查了百度才知道，因为iframe是独立的标签，外部是无法对iframe内部进行操作的，所以我是用了addEventListener方法对内部生成事件，从而进行数据的获取。

  // 初始化iframe
  document.getElementById('iframe').onload = function () {
       let iframe = document.getElementById('iframe').contentWindow
       // 通过id获取内容，这个内容其实是一个标签，标签里面才是iframe在页面显示的内容（其实就是html）
       // 获取 id 为 styler-id1的元素，为其添加鼠标事件，用于获取鼠标选中的文本或者图片
       iframe.document.getElementById('styler-id1').addEventListener('mouseup', () => {
       // 获取文字
       _this.words = iframe.getSelection().toString()
       // 获取图片
          if (iframe.getSelection().getRangeAt(0).commonAncestorContainer.getElementsByTagName('img')) {
              let ImgArray = new Array()
              ImgArray = iframe.getSelection().getRangeAt(0).commonAncestorContainer.getElementsByTagName('img')
	          for (let i in ImgArray) {
	             if (ImgArray[i].currentSrc) {
	             	 // fileImg 是在data中的一个数组，用于存放选中的图片
	                  _this.fileImg.push(ImgArray[i].currentSrc)
	             }
	           }
            }
        })
	    // 自定义鼠标右键事件
	    iframe.oncontextmenu = function (event) {
	       _this.onContextmenu(event, _this.words, _this.fileImg)
	       return false //组织浏览器右键
	    }
  }

iframe中鼠标事件

因为是右键一键生成反馈，所以要使用鼠标右键事件方法 oncontextmenu。因为是vue项目，我们的框架使用的是elementUI，所以右键操作我是安装了Vue 原生右键菜单组件（vue-contextmenujs）

下图是我自己根据需求修改成的右键菜单
在这里插入图片描述

这是右键菜单里面的内容，按钮事件可以自定义。
在上面的代码中iframe右键事件中调用下面的vue原生右键事件，并传入参数进行页面跳转从进行数据的显示。

	// 右键菜单
   onContextmenu(event, words, fileImg) {
        this.$contextmenu({
          items: [
            {
              label: '返回',
              icon: 'el-icon-back',
              onClick: () => {
                this.message = '返回(B)'
                console.log('返回(B)')
              },
            },
            {
              label: '反馈',
              icon: 'el-icon-service',
              onClick: () => {},
            },
          ],
          event,
          x: event,  //x轴坐标
          y: 0,		 //y轴坐标
          customClass: 'class-a',
          zIndex: 3,
          minWidth: 120,
        })
        return false
      },
    },

来个代码汇总吧，有这种问题的小伙伴们可以很方便的使用

	  // 初始化iframe
	  document.getElementById('iframe').onload = function () {
	       let iframe = document.getElementById('iframe').contentWindow
	       // 通过id获取内容，这个内容其实是一个标签，标签里面才是iframe在页面显示的内容（其实就是html）
	       // 获取 id 为 styler-id1的元素，为其添加鼠标事件，用于获取鼠标选中的文本或者图片
	       iframe.document.getElementById('styler-id1').addEventListener('mouseup', () => {
	       // 获取文字
	       _this.words = iframe.getSelection().toString()
	       // 获取图片
	          if (iframe.getSelection().getRangeAt(0).commonAncestorContainer.getElementsByTagName('img')) {
	              let ImgArray = new Array()
	              ImgArray = iframe.getSelection().getRangeAt(0).commonAncestorContainer.getElementsByTagName('img')
		          for (let i in ImgArray) {
		             if (ImgArray[i].currentSrc) {
		             	 // fileImg 是在data中的一个数组，用于存放选中的图片
		                  _this.fileImg.push(ImgArray[i].currentSrc)
		             }
		           }
	            }
	        })
		    // 自定义鼠标右键事件
		    iframe.oncontextmenu = function (event) {
		       _this.onContextmenu(event, _this.words, _this.fileImg)
		       return false //组织浏览器右键
		    }
	  },
 	  // 右键菜单
	  onContextmenu(event, words, fileImg) {
        this.$contextmenu({
          items: [
            {
              label: '返回',
              icon: 'el-icon-back',
              onClick: () => {
                this.message = '返回(B)'
                console.log('返回(B)')
              },
            },
            {
              label: '反馈',
              icon: 'el-icon-service',
              onClick: () => {},
            },
          ],
          event,
          x: event,  //x轴坐标
          y: 0,		 //y轴坐标
          customClass: 'class-a',
          zIndex: 3,
          minWidth: 120,
        })
        return false
      },
    },