监听嵌套在vue中iframe页面中的按钮的点击事件,在点按钮点击时,先处理自己的逻辑,再执行iframe的逻辑,并且不知道iframe页面的方法和按钮是没有固定id和class
时间: 2024-03-03 13:48:08 浏览: 59
可以通过以下步骤实现:
1. 获取到iframe元素,可以使用`document.querySelector()`或`document.getElementById()`方法获取到。
2. 使用`iframe.contentWindow`获取到iframe的window对象,进而获取到iframe页面中的document对象。
3. 使用`document.querySelectorAll()`方法获取所有的按钮元素,然后遍历它们,为它们添加点击事件处理函数。
4. 在点击事件处理函数中,先处理自己的逻辑,然后再调用iframe页面中的方法。
以下是示例代码:
```
// 获取iframe元素
const iframe = document.querySelector('iframe')
// 获取iframe页面中的document对象
const iframeDoc = iframe.contentWindow.document
// 获取所有按钮元素并为它们添加点击事件处理函数
const buttons = iframeDoc.querySelectorAll('button')
buttons.forEach(button => {
button.addEventListener('click', () => {
// 处理自己的逻辑
console.log('Button clicked')
// 调用iframe页面中的方法
iframeDoc.someFunction()
})
})
```
需要注意的是,由于iframe中的页面可能涉及到跨域问题,因此需要确保父页面和iframe页面都在同一个域名下,否则可能会受到同源策略的限制。
阅读全文