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

面向百度丶CV开发

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

阅读量2.5k

点赞数 1

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

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

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

版权

<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>