jQuery Mobile 自定义选择菜单适用于 Mobile Safari，但不适用于 UIWebView
Posted
技术标签:
【中文标题】jQuery Mobile 自定义选择菜单适用于 Mobile Safari，但不适用于 UIWebView【英文标题】：jQuery Mobile custom select menu works in Mobile Safari, but not in UIWebView 【发布时间】：2012-07-13 22:25:45 【问题描述】：我在UIWebView 内运行的应用程序中使用jQuery Mobile。该应用程序以Monotouch 编写，并具有多个选项卡，其中一个选项卡在网络视图中显示html5 内容。 jQuery Mobile 允许html5 内容与应用程序的本机部分具有一致的外观和感觉。我正在尝试在html5 中构建使用jQuery Mobile 自定义选择菜单的功能，换句话说，选择将data-native-menu 属性设置为false，在这里我遇到了一个奇怪的问题。我已将问题提炼为一个简单的示例；这是代码：
<body>
<div data-role="page" data-theme="b" id="forms">
<div data-role="content">
<select id="test" data-native-menu="false">
<option value="abc">ABC</option>
<option value="def">DEF</option>
<option value="ghi">GHI</option>
<option value="jkl">JKL</option>
<option value="mno">MNO</option>
<option value="pqr">PQR</option>
<option value="abc1">ABC</option>
<option value="def1">DEF</option>
<option value="ghi1">GHI</option>
<option value="jkl1">JKL</option>
<option value="mno1">MNO</option>
<option value="pqr1">PQR</option>
<option value="abc2">ABC</option>
<option value="def2">DEF</option>
<option value="ghi2">GHI</option>
<option value="jkl2">JKL</option>
<option value="mno2">MNO</option>
<option value="pqr2">PQR</option>
</select>
</div> <!--content-->
</div> <!-- page-->
</body>
当我在Firefox 或Safari 中运行此代码时，它运行良好。此外，如果我在Mobile Safari 在iPad 上运行它，它也可以正常工作。但是，当我在UIWebView在我的应用程序中运行它时，弹出窗口仅在选择中显示少量项目并且显示覆盖物时，只能显示和关闭。相反，当显示全屏弹出窗口时，关闭弹出窗口时会出错。因此，例如，使用我上面粘贴的代码，如果在iPad 位于portrait mode 中时单击选择，则会显示一个覆盖。但是，如果我打开iPad 使应用程序位于landscape mode 中并单击选择，则覆盖的项目太多，而是会显示全屏弹出窗口。然后当我尝试关闭这个全屏弹出窗口时，会发生以下两种情况之一：
1) 第一次加载页面时，弹出窗口根本不会关闭。它根本不会响应任何触摸事件。
2) 如果我在 webview 中重新加载页面内容并重试，现在当我尝试关闭弹出窗口时，整个 UIWebView 将消失。这种情况将在页面的第二次和每次后续加载时发生。
奇怪的是，当我在调试模式下运行应用程序时，当我尝试从弹出窗口中选择一个项目或单击 X关闭它。 webview 只是消失。我可以说 webview 已经消失了，因为我的 UITabBarController 有一个背景图像显示在每个选项卡上，除了 UIWebView 所在的选项卡上，因为 webview 覆盖了此选项卡上的背景图像。当我尝试关闭弹出窗口时，背景图像突然出现在原本为空的屏幕上......这意味着 webview 现在已经消失了。
我真的需要能够在我的html5 内容中使用自定义选择菜单，所以我希望其他人以前遇到过这种情况并且知道这里发生了什么。那么，有谁知道是什么导致了UIWebView 中的这种奇怪行为，或者知道这个问题的解决方法吗？
我的iPad 正在运行ios 版本5.0.1 (9A405) 和jQuery Mobile 我尝试过的版本是alpha 4.1 和1.1.0。这两个版本的jQuery Mobile 都会出现同样的问题。如果需要有关我的iPad 或开发设置的其他信息，请告诉我。
更新：
请忽略我上面所说的关于 UIWebView 消失的内容。这实际上并没有发生。事实上，webview 中发生了异常，并且重定向到了嵌入在应用程序包中的错误 html 页面。此错误屏幕与UITabBarController 具有相同的背景图像，因此我得出了错误的结论。所以，我现在知道 webview 中发生了一些异常，但它仍然非常多！ :) 当我知道更多时，我会发布更新。
更新 2：
我现在知道出了什么问题，尽管我还不知道如何解决它。这就是正在发生的事情：单击弹出窗口时，jQuery Mobile 正在将 #&ui-state=dialog 添加到 url。在其他浏览器中，此更改会反映在浏览历史记录中，因此通过在浏览历史记录上完成back 来关闭弹出窗口。在我的 UIWebView 的情况下，对 url 的更改没有反映在历史记录中，因此单击关闭要么什么都不做（历史记录为空），要么返回太远（到只有在加载实际内容之前加载的背景图像）。
【问题讨论】：
【参考方案1】：其实我发现这个问题毕竟不是由UIWebview引起的。当我将代码简化为 just 时，我发现它可以正常工作。发生此问题是因为在我的 web 视图中我使用了 ASIHTTPRequest 而 this 是导致 url 的更改未反映在浏览器历史记录中的原因。
我还没有查看 哪里 ASIHTTPRequest 在这个阶段出错了，但我认为这超出了这个问题的范围。当我在 ASIHTTPRequest 中处理这个问题时，我将发布关于它的单独问题。
不过，我确实设法解决了这个问题，解决方法涉及更改 jQuery Mobile 源以弥补上一页未存储在历史记录中的事实。在 'jQuery Mobile` 的 1.1.1 版中，在 4177 和 6933 行找到以下代码：
window.history.back();
注释掉这些行并将它们替换为以下内容：
$.mobile.changePage( $.mobile.urlHistory.getPrev().url );
现在，'jQuery Mobile` 将实际导航到之前的 url，而不是回复浏览器历史记录。这比使用浏览器历史记录稍微慢一些，但在我这样的情况下，当需要的页面没有正确保存到历史记录时更可靠。
【讨论】：
以上是关于jQuery Mobile 自定义选择菜单适用于 Mobile Safari，但不适用于 UIWebView的主要内容，如果未能解决你的问题，请参考以下文章
cx选择是基于 jQuery公司的多级联动菜单插件，适用于省市、商品分类等联动菜单。
在 Jquery Mobile 中使用 Google Map 使用现有位置创建自定义选择的位置？