Jquery mobile的data-rel="dialog"在iPhone或iPad上无法正常工作。

Question

以下代码：

<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手机浏览器上也可以使用。但在iPhone或iPad浏览器上无法使用。看起来链接被点击了，但我没有看到对话框。要么它超级延迟，要么就根本不起作用。

页面的响应和加载时间相当快，普通桌面浏览器上无缝工作。这是一个非常小的页面，加载速度很快。

有什么提示可以尝试让它起作用吗？

- MoXplod

---

你使用的是哪个版本的jQM？ - uday

你确定你的/Client/Events?ID=...页面返回的HTML没有错误吗？ - shanabus

JQM - 1.1，是的，HTML 正确返回了。它适用于所有桌面浏览器。 - MoXplod

你能发一下示例链接吗？我本来以为这可能与 AJAX 页面加载有关，但如果在桌面上运行良好，那就不是这个问题了。 - servarevitas3

Answer 1

我猜测这可能与您使用的URL有关，而JQM不理解这样的链接应该如何处理：

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

没有文件结尾，没有井号，我一直在为一个简单的[?para=meter]（https://github.com/jquery/jquery-mobile/issues/4253）链接和JQM处理它而奋斗了几天。

我解决“iPad上什么都没发生”的最简单方法是启用iPad调试器并通过相应的JQM小部件进行console.log。在您的情况下，请从这里开始（大约在第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;
        }
      ... 

从头到尾执行 click-handler，确保标记所有 返回值，以各种原因结束函数。

完成 click-handler（不长），你会看到它触发了一个 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号，更有可能）。完成所有标记后（在loadpage后停止！:-），在浏览器和iPad上重新加载页面，看看iPad与浏览器相比失败的地方。可能需要一个小时，但之后您将对JQM的工作原理有很好的理解 :-)。

另一个原因可能是推送状态处理程序（大约3781号）。如果浏览器支持推送状态（桌面是，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

这将是非pushstate设备（例如我的iPad ios3.3）尝试解析的url，但也无法工作。然而，我猜测您的链接在点击或changepage处理程序中失败，当JQM解析URL时。如果您自己发现了问题，请告诉我浏览器和iOS之间的区别在哪里。然后我们可以看看是否可修复。

- frequent

---

那个答案提供了很多关于如何调试这个问题的见解，我很惊讶JQM在没有文件扩展名的情况下会出现问题。看起来有些老派！我希望我有时间去调试jQM，但是我没有！ :)也许现在我只能采用更简单的方法，将其变成常规页面而不是对话框。谢谢你的回答。 - MoXplod

没问题。如果你解决了问题，请回复我，然后我会检查一下我的意见是否有所帮助。 - frequent

pushstate刚被jqm修复。我在iPad上再次尝试了您的页面，仍然无法工作。因此，一个选项被排除了。 - frequent

Answer 2

好的，我在iOS Safari的Debug控制台下检查了该网站。看起来Safari正阻止你的对话框加载的Facebook的跨域请求（参考这里：Unsafe JavaScript attempt to access frame warning in Safari）- 这就是调试控制台显示的警告。根据我的研究，似乎Safari比其他浏览器更严格要求。

- servarevitas3

---

你能分享一下你在iOS Safari中如何调试的吗？是否有类似于Firebug的工具？ - MoXplod

您可以通过进入“设置”，然后选择“Safari”，再选择“高级”来在iPad上启用调试控制台。虽然它不是非常好的控制台，但确实有所帮助。 - servarevitas3

这是调试移动网站的另一种方法：http://jsconsole.com/remote-debugging.html - servarevitas3

很奇怪，因为错误信息明确指出是尝试访问一个框架，并给出了一个 Facebook 的 URL，就像我发布的问题中一样。我想复制这条消息，但对话框不允许你复制文本。 - servarevitas3

大多数浏览器都会输出Facebook / Twitter / 社交小部件的通知，但据我所知，没有一个可以阻止通信。 - Jasper