滚动子 iframe 时接收 touchmove 事件答案

【问题标题】：Receiving touchmove events when scrolling a child iframe滚动子 iframe 时接收 touchmove 事件
【发布时间】：2014-08-22 06:37:29
【问题描述】：

我正在开发一个移动设计的网络应用程序，它将内容加载到内部 iframe 中。每次加载新内容时，此框架都会更新其高度，以避免在 iframe 内滚动。这样我就有了一个长的 iframe，它在主 webapp 的上下文中滚动。这目前在 Safari 和 Chrome for iOS 中运行良好。最简单的应用结构示例是：

<div id="header">
    <p>Scroll: <span id="scroll"></span></p>
    <p>Touchmove: <span id="touchmove"></span></p>
</div>
<iframe src="https://developer.android.com/about/dashboards/index.html" class="frame-style" id="uframe"></iframe>

为了触发某些视觉效果，我需要知道应用程序内容的当前 Y 轴位置。我正在使用 Jquery 的绑定函数从触摸设备接收 touchmove 事件。 Scroll 事件不是很有用，因为在移动设备上它们仅在滚动结束时触发，每次滚动更改时我都需要知道 Y 轴的位置。不幸的是，我发现滚动开始触摸 iframe 的内容时不会触发 touchmove 事件。我正在使用这些语句：

$(window).bind('touchmove', 
           function(){        
   console.log('touchmove='+window.pageYOffset); //Show in console
   $('#touchmove').html(window.pageYOffset); //Update value in document
});

所以问题是：有没有办法在滚动子 iframe 时接收 touchmove 事件？

可以查看正在运行的示例：http://jsfiddle.net/badger_cl/b9322/1/
要在移动设备上试用，您可以访问：http://fiddle.jshell.net/badger_cl/b9322/1/show/light/

红色条纹是一个div元素，当从这个元素开始触摸滚动时，它会更新touchmove的值。当滚动从 iframe 内容（本例中为 Android 仪表板）开始时，它不会更新 touchmove 值。滚动更新只是为了证明它只在滚动结束时更新。

【问题讨论】：

标签： javascript html iframe mobile

【解决方案1】：

您可以在父页面和加载到 iframe 的页面上收听 touchmove 事件。

接下来，您需要从 iframe 与父窗口通信 touchmove 事件发生。您可以为此使用Window.postMessage 方法。

从 iframe 发送消息：

window.parent.postMessage(messageObj);

在父窗口中接收消息：

window.addEventListener('message', function (event) { var messageObj = event.data; });

文档：https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

【讨论】：