监听嵌套在vue中iframe页面中的某个按钮的执行,在点按钮点击时,先处理自己的逻辑,再执行iframe的逻辑,并且不知道iframe页面的方法和按钮是没有固定id和class
时间: 2024-03-03 18:48:10 浏览: 127
Vue中对iframe实现keep alive无刷新的方法
5星 · 资源好评率100%
可以通过以下步骤实现:
1. 获取到iframe元素,可以使用`document.querySelector()`或`document.getElementById()`方法获取到。
2. 使用`iframe.contentWindow`获取到iframe的window对象,进而获取到iframe页面中的document对象。
3. 为父页面中的按钮添加点击事件处理函数,在处理函数中获取到iframe页面中的所有按钮元素,并为它们添加点击事件处理函数。
4. 在点击事件处理函数中,首先判断点击的是不是目标按钮,如果是则先处理父页面的逻辑,然后再调用iframe页面中的方法。
以下是示例代码:
```
// 获取iframe元素
const iframe = document.querySelector('iframe')
// 获取iframe页面中的document对象
const iframeDoc = iframe.contentWindow.document
// 获取父页面中的按钮元素
const parentButton = document.querySelector('#parent-button')
// 为父页面中的按钮添加点击事件处理函数
parentButton.addEventListener('click', () => {
// 获取所有按钮元素并为它们添加点击事件处理函数
const buttons = iframeDoc.querySelectorAll('button')
buttons.forEach(button => {
button.addEventListener('click', () => {
// 判断是否是目标按钮
if (button.classList.contains('target-button')) {
// 处理父页面的逻辑
console.log('Parent button clicked')
// 调用iframe页面中的方法
iframeDoc.someFunction()
}
})
})
})
```
需要注意的是,由于iframe中的页面可能涉及到跨域问题,因此需要确保父页面和iframe页面都在同一个域名下,否则可能会受到同源策略的限制。
阅读全文