在iframe中获取选中的数据/iframe中鼠标事件
我现在的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
},
},
我这是根据自己的项目情况写的,具体细节大家可以根据自己项目问题情况进行修改,如果大家有更好的方法可以分享一哈。谢谢大家的支持,下次更新见!