jquery Mobile URL添加了#标签,该标签会破坏Internet Explorer中的表单



大家好,我的问题是我有一个jquery移动网站,链接像正常的,例如

<a href="http://mysite.com/login">Login</a> 

现在,当他们转到firefox等中的那个页面时,它会转到

http://mysite.com/#login

然后浏览器启动并删除#,然后转到

http://mysite.com/login

问题是,在Internet Explorer中,这种情况不会发生,它会显示(在这种情况下)登录表单,但帖子不想工作,只是回到主页,所以

http://mysite.com

我听到有人说要删除ajax来解决这个问题,但这不是解决真正的问题吗?

任何帮助都会很棒。

如果我删除了#,那么魔法一切都会起作用。只是让你知道。

谢谢Richard


我使用的是jquery mobile,所以我将这些内容包含在我的头中。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

只需在布局(master)中添加以下jquery代码,您的网站就会在IE中运行。。。。此代码获取表单标记。如果您的视图没有表单标记,请包含表单标记。看到奇迹。

 <script type="text/javascript">
           $(document).ready(function () {
           if ($.browser.msie || $.browser.webkit) {
               $("a").attr("data-ajax", "false");
               $("a").attr("rel", "external");
               var a = $("form");
               if (a != null) {
                   $("form").first().attr("data-ajax", "false");
                   $("form").first().attr("rel", "external");
               }
           }
       });
   </script>

当你转到FireFox中的链接时,它应该转到http://mysite.com/login

除非你的链接看起来像这样:

<a href="http://mysite.com/#login">Login</a> 

否则,它应该在所有浏览器中都能正常工作。

我遇到了同样的问题,我在jQuery Mobile页面上创建的表单在除internet explorer之外的所有浏览器中都能工作。添加以下内容为我修复了问题:

    <script>
        $(document).bind("mobileinit", function () {
            $.mobile.ajaxEnabled = false;
        });       
    </script>

您可以这样写<a>标签:

<a href="http://mysite.com/login" rel="external">Login</a> 

但请记住,这将消除jquery-mobile的转换效果,它将重定向到该页面。

检查一下这是否能解决你的问题。

如果在操作标记中使用绝对路径或根相对路径,效果如何。我不确定你是否已经在使用它,但例如:

<form action="/folder/anotherfolder/process.php" method="post">
....
</form>

这样的话,希望你的url中有一个hash标签也没关系。

此行为可能与JQM:中的几种情况之一有关

1) 重定向并链接到目录"当链接到目录索引(例如href="typesofcats/"而不是href="typesofcats/index.html")时,必须提供尾部斜杠。这是因为jQuery Mobile假定url中最后一个"/"字符后的部分是文件名,并且在创建将来引用页面的基本url时,它将删除该部分。"http://jquerymobile.com/test/docs/pages/page-links.html

2) 表单的Ajax加载导致JQM出现问题指向表单的URL应该使用rel="external"来防止Ajax在当前页面中加载目标页面。链接到表单时,我总是使用rel="external"。

3) 表单标记无法识别rel="external"要防止通过Ajax提交Ajax表单,请使用target="_blank"或data-Ajax="false"https://github.com/jquery/jquery-mobile/issues/952

此外,来自jquerymobile.com/demos/1.0a3/#docs/api/globalconfig.html(我只能发布两个链接)。"ajaxEnabled(布尔值,默认值:true):jQueryMobile将在可能的情况下通过Ajax自动处理链接点击和表单提交。如果为false,url散列侦听也将被禁用,并且url将作为常规http请求加载。"

使用以上所有内容可以帮助您制定解决方案。

您不应该使用IE,而应该安装Windows Phone SDK,其中包括Windows Phone Emulator。我很好奇你是否会看到同样的行为。

嗨,这里只是想了一些跳出框框的想法——基本上我们对ie有问题。所有其他浏览器都很好,答案基本上是使用rel="external"来防止ajax的出现。因此,无论如何,正确的答案是使用一点javascript jquery样式来修改页面上的所有链接吗?如果是windows手机,则使用rel="external",因为任何地方都可能有表单,尝试使用表单查找页面的任何链接都会很烦人,并会影响所有浏览器。我知道这有点认输,但到目前为止,这似乎是唯一要做的事情。

做那件事有什么可取之处吗。感谢您迄今为止的投入。Richard

$(document).ready(function () {
        if($.browser.msie || $.browser.webkit) {
            $('a').attr('data-ajax','false');
        }

对我来说,这是一个简单而低技术的东西,它很管用,但另一个要好得多。

这是一个古老的问题,但对我来说是新鲜的。所以也许也会有人在寻找答案:尝试将以下内容添加到链接(a href…):rel="external"或data-ajax="false"

最新更新