vue3 判断iframe 是否拉起urlschemes协议弹窗

在 Vue3 中判断 iframe 是否尝试打开 URL schemes 协议的弹窗，通常需要监听 iframe 的 `load` 或者特定的 `error` 事件，并检查是否触发了关于安全协议的错误。由于浏览器的安全限制，JavaScript 可能无法直接获取到这种信息，但你可以通过一些间接的方式来推测。

一个常见的做法是：

1. 首先，给 iframe 添加一个自定义事件，例如 `custom-scheme-event`，当它试图加载 url schemes 时，可能会触发这个事件。

<template>
  <div>
    <iframe :src="iframeSrc" @custom-scheme-event="handleSchemeEvent"></iframe>
  </div>
</template>

<script>
export default {
  methods: {
    handleSchemeEvent() {
      // 当 iframe 尝试访问 url schemes 并引发错误时，这里会触发
      console.log('Iframe is trying to open a scheme.');
      // 检查并采取相应处理措施，如阻止默认行为或显示警告
    },
  }
}
</script>

2. 然而在实际操作中，浏览器可能不会总是触发这个自定义事件。为了更精确地检测，可以使用 `postMessage` API 从 iframe 发送消息到父组件，询问它是否有这样的尝试。

// 在 iframe 内部
window.addEventListener('beforeunload', () => {
  window.parent.postMessage({ attemptScheme: true }, '*');
});

// 在父组件的 mounted 或者其他合适时机接收消息
mounted() {
  this.$on('message', (event) => {
    if (event.data.attemptScheme) {
      this.handleSchemeEvent();
    }
  });
}

请注意，这种方法并非绝对可靠，因为浏览器的行为可能会有变化，而且依赖于用户的交互。如果安全性非常重要，你可能还需要考虑结合服务器端的验证或其他安全策略。同时，