2

我正在使用 Jquery Mobile 构建现有 ASP.NET mvc3 站点的移动版本。

我这样做的方法是在我的控制器中检测页面是否被移动设备请求，然后如果有移动设备，则提供适合移动设备的 mvc 视图，如果没有，则提供标准视图。

我遇到的问题是指向没有合适视图的页面的链接仍然被 jquery-mobile Ajaxed 到页面中，弄乱了布局。我知道您可以通过使用 data-ajax="false" 逐个链接地禁用此功能，但是我无法控制每个链接，因为它是基于 CMS 的站点，因此没有什么可以阻止用户从链接到网站内没有移动视图的页面。

我希望我能做的可能是在该站点的桌面版本的基本视图中包含一个属性，当它尝试 ajax 加载页面、拒绝它并重新加载没有 ajax 的链接时，jquery mobile 会拾取该属性。这可能吗？

4

3 回答 3

0

我建议渲染一些本地化的 JS 和 ViewBag 属性的组合来处理每个页面的问题，否则你最终会遇到一个场景，你必须在任何地方应用 'data-ajax="false"'，这是不漂亮。

除了您的控制器代码可能是用户代理检测以填充“ViewBag.IsMobileDevice”属性之外，类似以下内容可能会帮助您：

<script type="text/javascript">

    $( document ).bind( "mobileinit", function( event, data ){
        if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion) && @ViewBag.IsMobileDevice) {
            $.mobile.ajaxEnabled = false;
        }
    });

</script>

请注意，我以 iphone/ipad/ipod 为例，但您可以根据自己的要求在其中使用任何东西。我会查看51degrees.mobi以获取有关移动检测的一些灵感。

我希望这可以帮助您或至少为您指明正确的方向。

于 2012-06-05T03:19:55.973 回答
0

没有移动视图的 URL，你可以给它一个单独的类，比如“.no-mobi-view”，然后在 pagecreate 事件之前，你可以编写一个 javascript 代码来添加属性数据

$( document ).live( "pagebeforecreate", function( event){
    $('.no-mobi-view').attr("data-ajax","false");
});

它可能依赖于 CMS，但您可能可以在将 cms 输出发送到浏览器之前对其进行过滤。而不是您可以测试的课程target=_blank

于 2012-06-05T05:12:10.233 回答
0

暂时我已经这样做了：

$(document).bind("pageload", function (event, data) {
    if ($("div[data-role=\"content\"]", data.xhr.responseText).length < 1) {
       window.location = data.url;                  
    } 
});

我正在检查加载的页面是否包含 jQuery 移动元素 data-role="content"，如果没有，则将浏览器重定向到正确的页面。这并不理想，因为我正在解析加载时每个页面的 html。这也意味着非移动站点被加载到 jquery mobile 中，然后在重定向上再次加载（尽管在这个站点中这种情况不应该经常发生）。

我还必须在该站点的桌面版本的主视图上添加一个带有 data-role="page" 的空隐藏 div，因为 jquery mobile 仍然尝试在 window.location 启动之前转换到非移动站点，而我无法解决如何防止这种情况。

于 2012-06-05T05:34:30.433 回答