Vue中监测iframe里的xhr

在Vue.js中，要监测iframe内的xhr请求，可以使用`Intersection Observer API`结合Vue的响应式系统，因为iframe中的内容默认情况下是不在父级视图下的，直接监听DOM变化是不可行的。以下是实现这一功能的一个基本步骤：

1. 首先，在Vue实例中注册一个自定义指令，如`vue-observe-children`，用于创建Intersection Observer:

// vue-observe-children.js
export default {
  inserted: function (el) {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting && el.data.observeChildrenCallback) {
          el.data.observeChildrenCallback(entry);
        }
      },
      { rootMargin: '0px', threshold: 0.5 } // 可调整阈值
    );

    observer.observe(el.$el); // 监听元素是否进入视野
    this.$on('unobserveIframe', () => observer.unobserve(el.$el)); // 注册移除事件
  },
  unbind() {
    this.$off('unobserveIframe');
  }
};

2. 然后在需要监测xhr的组件上使用这个指令，并传入一个回调函数：

<template>
  <div ref="parent" v-children="{ observeChildrenCallback: handleIframeXhr }">
    <!-- ... -->
    <iframe :src="iframeSrc" @load="handleIframeLoaded"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iframeSrc: '',
      xhrCallback: null, // 这里可以根据需求提供回调函数
    };
  },
  methods: {
    handleIframeLoaded() {
      // 当iframe加载完成后，设置xhrCallback（如果已提供）
      this.xhrCallback();
    },
    handleIframeXhr(entry) {
      // 当iframe内容进入视野时，触发xhr操作
      if (entry.isIntersecting) {
        const iframeWindow = entry.target.contentWindow;
        if (!iframeWindow.$axios) return; // 如果iframe中未挂载axios，则忽略

        iframeWindow.$axios.get('/your-url') // 替换为实际的xhr请求
          .then(response => {
            console.log('xhr response:', response);
            // 如果提供了xhrCallback，调用它处理结果
            if (this.xhrCallback) this.xhrCallback(response);
          });
      }
    },
  },
  mounted() {
    // 初始化iframe观察
    this.handleIframeXhr({ isIntersecting: false });
  },
  beforeDestroy() {
    // 在销毁之前停止观察
    this.$emit('unobserveIframe');
  },
};
</script>

3. 使用`handleIframeXhr`函数时，你需要传递一个xhr回调到`v-observe-children`指令的配置中。当xhr完成，你可以在这个回调中处理响应。