【问题标题】:Jquery mobile data-rel="dialog" doesnot work on iphone or ipadJquery mobile data-rel="dialog" 在 iphone 或 ipad 上不起作用
【发布时间】:2012-05-09 05:53:09
【问题描述】:

以下代码

<a data-rel="dialog" href="/Client/Events?ID=c2a7a58e-bef1-4574-987f-4adfc2c3ecc1">
    <div class="ui-li-aside"> 1 </div>
       <div>
          Alejandra Garcia
       </div>
   </a>

这适用于我的电脑浏览器,也适用于 windows phone 浏览器。但不适用于 iphone 或 ipad 浏览器。看起来链接被点击了,但我没有看到任何对话框。要么是超级延迟,要么就是不工作。

页面的响应和加载时间非常快,并且可以在常规桌面浏览器上无缝运行。它是一个非常小的页面,可以加载。

我应该尝试让它工作的任何提示?

【问题讨论】:

  • 你用的是哪个版本的jQM?
  • 您确定您的/Client/Events?ID=... 页面返回HTML 没有错误吗?
  • JQM - 1.1 是的,正确返回了 html。它适用于所有桌面浏览器。
  • 您可以发布任何示例链接吗?我原以为这与 AJAX 页面加载有关,但如果它在桌面上可以正常工作,则不然。

标签: javascript jquery iphone ipad jquery-mobile


【解决方案1】:

我怀疑这与您正在使用的网址有关,而 JQM 不明白如何处理这样的链接:

/Client/Events/StubCheckIn/innasf?stubID=c807321b-5381-4338-adef-9e676374d85d

没有文件结尾,没有标签,我一直在使用简单的 [?para=meter] (https://github.com/jquery/jquery-mobile/issues/4253) 链接和 JQM 处理它几天。

我解决“ipad 上什么都没有发生”的最简单方法是通过相应的 JQM 小部件启用 iPad 调试器和 console.log-ging。在你的情况下从这里开始(大约第 3582 行):

// click routing - direct to HTTP or Ajax, accordingly
$( document ).bind( "click", function( event ) {
    // your first flag
    console.log("flag 1 - click detected")
    if( !$.mobile.linkBindingEnabled ){
        return;
        }

     var link = findClosestLink( event.target ), $link = $( link ), httpCleanup;

     if ( !link || event.which > 1 || !$link.jqmHijackable().length ) {
        // your second flag
        console.log("flag 2 - not a link?!?)
        return;
        }
      ... 

通过点击处理程序一直执行此操作,并确保标记所有返回,这会因各种原因终止该功能。

当您完成点击处理程序(不是那么长)时,您会看到它触发了一个 changePage,因此请按照它到 changePage 处理程序并继续标记。这应该从这里的 (#3232) 行开始:

  // Show a specific page in the page container.
  $.mobile.changePage = function( toPage, options ) {
     console.log("flag x - made it to changepage");
     ...

一直通过changepage,然后跟随transitionpages(我认为不会是这样)和$.mobile.loadPage(关于#2931,更有可能)。

一旦您标记了所有内容(在加载页面后停止!:-),请在浏览器和 ipad 上重新加载页面,并查看 ipad 与浏览器的故障位置。可能需要一个小时,但之后您将对 JQM 的工作原理有一个很好的了解 :-)

另一个原因可能是 pushstate 处理程序(大约 #3781)。如果浏览器支持 pushstate(桌面是,iOS...不确定,iOS3 否),您可以制作 不错的 URL,所以如果您从您的页面开始:

root.com/client/events/checkin/innasf

到一个对话框

http://root.com/Client/Events/StubCheckIn/innasf?stubID=96e63aee-1465-4ecd-ad35-123f240d09ff

您的浏览器仍然显示页面 url - 可能是因为您将 changehash 设置为 false(保留 url)。这(我相信)是由 pushstate 处理程序完成的,因为您的 URL 应该是:

 root.com/client/events/checkin/innasf#http://root.com/Client/Events/StubCheckIn/innasf?stubID=96e63aee-1465-4ecd-ad35-123f240d09ff&some-dialog-ending

这将是非推送状态设备将尝试解析的 url(例如我的 iPad ios3.3),它也不起作用。

不过,我的猜测是,当 JQM 解析 URL 时,您的链接在 click 或 changepage 处理程序中的某处失败。

如果您通过了举报,请告诉我浏览器和 iOS 之间的差异体现在哪里。然后我们可以看看这是否可以修复。

【讨论】:

  • 这个答案提供了很多关于如何调试这个东西的见解,我很惊讶 JQM 在检测没有文件扩展名的链接时遇到问题。看起来很老派!我希望我有时间调试 jQM,但我没有! :) 也许我现在必须采用一种更简单的方法,使其成为常规页面,而不是对话框。谢谢你的回答。
  • 没问题。如果你绕过,回帖,然后我会检查我的 2cents 是否有任何帮助。
  • pushstate 刚刚被 jqm 修复。我在 ipad 上再次尝试了您的页面。还是不行。所以,排除了一个选项。
【解决方案2】:

好的,我在 iOS Safari 的调试控制台下检查了该站点。看来 Safari 正在阻止您的对话框加载的对 facebook 的跨域请求(在此处引用:Unsafe JavaScript attempt to access frame warning in Safari) - 这是调试控制台显示的警告。根据我的研究,Safari 在这方面似乎比其他浏览器更严格。

【讨论】:

  • 你能分享你如何在 ios safari 中调试吗?有没有类似萤火虫的东西?
  • 您可以在 iPad 上启用调试控制台,方法是依次转到“设置”、“Safari”和“高级”。这不是一个很好的控制台,但确实有帮助。
  • 这是另一种调试移动网站的方法:jsconsole.com/remote-debugging.html
  • 这很奇怪,因为错误消息明确表示这是试图访问一个框架并提供了一个 Facebook URL,就像我发布的问题一样。我会复制消息,但对话框不允许您复制文本。
  • 做了更多测试。错误没有再次出现,我可以通过点击来显示对话框。无法让它再次显示。我认为问题出在列表代码中,而不是对话框代码中。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-05-21
  • 1970-01-01
  • 2013-07-06
  • 1970-01-01
  • 1970-01-01
  • 2012-05-03
相关资源
最近更新 更多