Tableau iframe内操作无法触发idle-vue活动检测的解决方案求助

我有一个Vue网站，使用idle-vue实现用户45分钟无活动自动登出功能，main.js配置代码如下：

import IdleVue from 'idle-vue'
import Vue from 'vue'

let options = {
  idleTime: 1000 * 60 * 45, // 45分钟无活动后登出
  startAtIdle: false,
  eventEmitter: Vue.prototype.$bus,
  events: ['keydown', 'mousedown', 'touchstart', 'scroll'],
}

Vue.use(IdleVue, options)

该功能大部分场景运行正常，但网站中嵌入的Tableau iframe内的操作无法被识别为用户活动，导致用户操作Tableau视图时会被中途登出。测试时将无活动时长设为5秒，使用以下钩子函数观察状态：

onIdle () {
  console.log('Idle')
},
onActive () {
  console.log('Active')
}

尝试把Tableau嵌入API的MarkSelectionChanged、filterchanged等事件添加到idle-vue的events列表中，但并未生效。请问如何捕获Tableau嵌入视图内的活动并将其注册为网站的用户活动？

由于iframe内的事件无法直接被父页面的idle-vue监听，需要借助Tableau嵌入API监听iframe内的交互事件，再手动触发父页面的活动信号来重置idle-vue的计时器。具体步骤如下：

• 按Tableau嵌入API规范初始化嵌入视图，确保能获取到Tableau Viz实例
• 为Viz实例绑定需要监听的交互事件（如标记选择、筛选器变化、视图操作等）
• 在事件回调中，手动触发idle-vue的活动重置逻辑

示例代码：

// 假设在Vue组件中嵌入Tableau视图
mounted() {
  // 初始化Tableau Viz实例（根据实际嵌入方式调整）
  const viz = new window.tableau.Viz(
    this.$refs.tableauContainer,
    '你的Tableau视图地址',
    { hideTabs: true }
  )

  // 绑定Tableau交互事件
  viz.addEventListener(window.tableau.TableauEventType.MarkSelectionChanged, this.resetIdleTimer)
  viz.addEventListener(window.tableau.TableauEventType.FilterChanged, this.resetIdleTimer)
  viz.addEventListener(window.tableau.TableauEventType.SelectionChanged, this.resetIdleTimer)
  // 可根据需求添加更多事件，比如参数变化、视图切换等
},
methods: {
  resetIdleTimer() {
    // 方式1：通过idle-vue的eventEmitter触发活动事件
    this.$bus.emit('idleVue_active')
    // 方式2：如果方式1不生效，手动触发父页面被idle-vue监听的事件（比如mousedown）
    window.dispatchEvent(new Event('mousedown'))
  }
}

注意事项：

• 确保已正确引入Tableau嵌入API脚本
• 事件类型使用Tableau API提供的常量，避免拼写错误
• 若使用window.dispatchEvent方式，要保证触发的事件在idle-vue的events配置列表中（比如示例中的mousedown已在你的配置里）

内容的提问来源于stack exchange，提问作者courtneymickelsen