时间戳

首页 > 解决方案 > 父 vue 组件如何监听作为 HTML 页面的 iframe 事件？

javascript - 父 vue 组件如何监听作为 HTML 页面的 iframe 事件？

问题描述

我创建了一个存储 iframe 的组件

<template>

<iframe height=1000 width=100% :src="full" @myEvent="thisMethod" ></iframe>

</template>

<script>
export default {
    data() {
        return {
            path: '../lib/pdfjs-2.7.570-dist/web/viewer.html',
            name:'../t1.pdf',
            full: '../lib/pdfjs-2.7.570-dist/web/viewer.html?file=pdfs/t1.pdf'
        };
    },
  props: {
    fileName: String,
    path:String
  },

  methods:{
    thisMethod(){
        console.log("Hello from Parent")
    }
  }
}
</script>
<style scoped>
div {
  width: 50%;
  height: 79vh;
  min-width: 400px;
}
</style>

在我的 viewer.html 中，我想向我的父母触发一个事件，以便调用“thisMethod”。我试过做：

<html>
 A lot of HTML tags
</html>
<script>
      function myfunction(data){
         this.$emit('myEvent',data)
      }
</script>

但是查看器是一个 html 页面，我似乎找不到将事件从 .html 文件发送到 .Vue 文件的方法。我的问题基本上是能够在 .vue 父页面内的 HTML 页面中处理 JavaScript 事件的解决方案是什么？

标签： javascriptvue.jsvuetify.js

解决方案

推荐阅读