Question

我正在开发一个移动设计的webapp，它将内容加载到内部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 值。显示 Scroll 更新只是为了演示它仅在滚动结束时更新。

Answer 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

滚动子iframe时接收touchmove事件

1 个答案: