Question

我正在将jquery mobile slide panel实施到移动网络应用程序中。虽然解决方案应该非常直接，但除了轻微的滑动问题之外我还能完美地解决这个问题。

当扫描整个文档时，面板会立即打开（移动设备上有1秒滞后）：

$(document).on( "swiperight", function( e ) 
{
    $( "#nav-menu" ).panel( "open" );       
});

但我正在通过iframe加载页面的内容。包含iframe的区域不允许我“滑动”打开滑动面板。我以为我可以通过将'document'更改为'iframe'或'iframe＃content-frame'来解决这个问题：

$('iframe').on( "swiperight", function( e ) 
{
    $( "#nav-menu" ).panel( "open" );       
});

但我似乎无法让这个工作..

问题1：如何通过在包含iframe的区域上滑动来打开幻灯片？（该面板应在父页面上打开。不在iframe内部）。问题2：我如何解决我遇到的性能/滞后问题？

非常感谢您的帮助!!

Answer 1

我终于设法通过在iframe中的页面发布消息来修复滑动问题，如下所示：

$(document).on( "swiperight", function( e ) 
{
    parent.postMessage("SwipePageMessage","*");
});

在父页面中，我正在侦听正在发送的任何消息。

var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

eventer(messageEvent,function(e) {
    $( "#nav-menu" ).panel( "open" );       
},false);

它的工作正常，但我对在每个页面中实现此功能并不十分满意。

jquery移动幻灯片 - 在包含iframe的区域上滑动事件

1 个答案: