Question

我在jQuery Mobile内运行的应用程序中使用UIWebView。该应用程序使用Monotouch编写，并且有多个选项卡，其中一个选项卡在Webview中显示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。在其他浏览器中，此更改将反映在浏览历史记录中，因此通过对浏览历史记录执行back来关闭弹出窗口。对于我的UIWebView，对URL的更改是不反映在历史记录中，因此单击关闭不会执行任何操作（历史记录为空）或者返回太远（仅对于预加载屏幕在加载实际内容之前加载的背景图像。

Answer 1

我实际上发现这个问题毕竟不是由 UIWebview 引起的。当我将代码缩减为只是 webview时，我发现它工作正常。出现此问题是因为在我的网页视图中我使用了ASIHTTPRequest而此是导致网址更改不会反映在浏览器历史记录中的原因。

我没有看过 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

1 个答案: