滚动子 iframe 时接收 touchmove 事件 [英] Receiving touchmove events when scrolling a child iframe

问题描述

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

<p>滚动:<span id="scroll"></span></p><p>Touchmove:<span id="touchmove"></span></p>
<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',功能(){console.log('touchmove='+window.pageYOffset);//在控制台显示$('#touchmove').html(window.pageYOffset);//更新文档中的值});

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

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

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

解决方案

您可以在父页面和加载到 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

I'm developing a mobile-designed webapp which loads content into an internal iframe. This frame updates its height every time new content is loaded to avoid scrolling inside the iframe. In that way I have a long iframe which is scrolled in the context of the main webapp. This is currently working well in Safari and Chrome for iOS. The most simple example of the app structure is:

<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>

In order to trigger certain visual effects I need to know the current Y-axis position of the application's content. I'm using Jquery's bind function to receive touchmove events from touch devices. Scroll events are not very useful since on mobile devices they are only triggered at the end of the scrolling, I need to know the position of the Y-axis every time it has been changed by scrolling. Unfortunately I discovered touchmove events aren't triggered when scrolling starts touching the iframe's contents. I'm using these statements:

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

So the question is: Is there any way to receive touchmove events when scrolling a child iframe?

The running example can be checked on: http://jsfiddle.net/badger_cl/b9322/1/
To try it on a mobile device you can access: http://fiddle.jshell.net/badger_cl/b9322/1/show/light/

The red stripe is a div element, when the touch-scrolling starts from this element, it updates the touchmove value. When the scrolling starts at the iframe content (The Android dashboard in this case), it doesn't update the touchmove value. Scroll updates are shown just to demonstrate it only updates at the end of the scrolling.

解决方案

You can listen to touchmove event both on parent page and on page loaded into the iframe.

Next you will need to communicate from iframe to parent window that touchmove event happened. You can use Window.postMessage method for this.

Send message from iframe:

window.parent.postMessage(messageObj);

Receive message in parent window:

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

Documentation: https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

这篇关于滚动子 iframe 时接收 touchmove 事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！