如何解决jQuery TouchWipe无法捕获iframe内滑动手势的问题？

这个问题我之前也踩过坑——同域名的iframe虽然和父站同源，但它的内容是独立的文档上下文，父页面绑定在<iframe>元素上的touchwipe事件根本监听不到内部的滑动操作，因为触摸事件是发生在iframe内部的文档里，不会自动冒泡到父页面的iframe标签上。不过有两种亲测有效的解决办法：

方法一：直接在iframe页面内绑定touchwipe #

既然iframe加载的是自有域名的match.php，最直接的方式就是把touchwipe的代码放到这个页面里：

// 在match.php中引入jQuery和touchwipe插件后，添加以下代码
$(document).touchwipe({
  wipeLeft: function() { alert("left"); },
  wipeRight: function() { alert("right"); },
  wipeUp: function() { alert("up"); },
  wipeDown: function() { alert("down"); },
  min_move_x: 20,
  min_move_y: 20,
  preventDefaultEvents: true
});

这样事件直接绑定在iframe内部的文档上，滑动操作自然能被捕获到。如果只想监听特定区域，也可以把document换成页面内的某个容器选择器。

方法二：父页面通过同源权限操作iframe内部文档 #

因为是同域名，父页面可以访问iframe的内部文档对象，我们可以等iframe加载完成后，把touchwipe绑定到它的内部文档上：

// 监听iframe的加载完成事件，确保内部文档已就绪
$("#form-iframe").on("load", function() {
  // 获取iframe的文档对象
  const iframeDoc = this.contentDocument || this.contentWindow.document;
  // 绑定touchwipe到iframe内部文档
  $(iframeDoc).touchwipe({
    wipeLeft: function() { alert("left"); },
    wipeRight: function() { alert("right"); },
    wipeUp: function() { alert("up"); },
    wipeDown: function() { alert("down"); },
    min_move_x: 20,
    min_move_y: 20,
    preventDefaultEvents: true
  });
});

注意一定要等iframe加载完成再执行这段代码，否则iframe的文档还没初始化，绑定会失效。

补充说明 #

如果是跨域的iframe，上面两种方法都不适用，这时候需要用postMessage在父子页面间通信——在iframe内部监听滑动事件，然后把事件信息通过postMessage发送给父页面，父页面再处理响应逻辑。不过你这里是自有域名，完全不需要走这个复杂流程～

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