jquery mobile 滑动面板 - 在包含 iframe 的区域上滑动事件

Posted 2023-05-09

【中文标题】jquery mobile 滑动面板 - 在包含 iframe 的区域上滑动事件

【英文标题】：jquery mobile slide panel - swipe event on area containing an iframe

【发布时间】：2014-05-26 16:05:30

【问题描述】：

我正在将jquery mobile slide panel 实现到移动网络应用程序中。 除了我似乎无法解决的一个小问题之外，它工作得很好，即使解决方案应该非常简单......

在文档上滑动时，面板会立即打开（在移动设备上延迟 1 秒）：

$(document).on( "swiperight", function( e ) 

    $( "#nav-menu" ).panel( "open" );       
);

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

$('iframe').on( "swiperight", function( e ) 

    $( "#nav-menu" ).panel( "open" );       
);

但我似乎无法让它工作..

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

非常感谢您的帮助！

【参考方案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);

它工作得很好，但我对在每个页面中都实现这个功能不是很满意。