给iframe中增加点击事件并且获取点击的元素

面向百度丶CV开发

已于 2022-09-09 10:44:06 修改

阅读量3.2k

点赞数 1

文章标签： javascript 前端 html vue.js

于 2022-09-09 10:43:26 首次发布

本文链接：https://blog.csdn.net/weixin_45952434/article/details/126778428

版权

该博客主要涉及前端开发中iframe的使用，包括设置iframe的src属性、监听iframe的加载事件，并在加载完成后对iframe内的元素进行事件绑定，特别是针对点击事件的处理。代码示例展示了如何处理浏览器的兼容性问题，确保在不同环境下都能正确监听iframe的加载完成并执行相关操作。

摘要由CSDN通过智能技术生成

<template>
  <div class="content">
    <iframe
      allowtransparency="true"
      class="iframe"
      ref="iframe"
      id="iframeId"
      :src="srcUrl"
      width="100%"
      height="100%"
      frameborder="0"
    ></iframe>
  </div>
</template>
<script>
export default {
  data() {
    return {
      srcUrl: 'xxxxxxxxxxxxxxxxx'
    }
  },
  mounted() {
    const iframe = document.querySelector('#iframeId')
    // 处理兼容行问题
    if (iframe.attachEvent) {
      iframe.attachEvent('onload',  ()=> {
        // iframe加载完毕以后执行操作
        this.getFunc()
      })
    } else {
      iframe.onload =  ()=> {
        // iframe加载完毕以后执行操作
       this.getFunc()
      }
    }
  },
  methods: {
    getFunc(){
      this.$nextTick(()=>{
        for(var i = 0; i<window.frames.length; i++) {
            window.frames[i].document.onclick = function(e) {
                console.log(e.path[0],'eeeeeeeeee')
            }
        }
        console.log( document.getElementsByTagName('a'),'iframe已加载完毕2')
       })
    },
  }
}
</script>
<style scoped>
.content {
  width: 100%;
  height: 100%;
}
.iframe {
  overflow: scroll;
}
</style>