admin管理员组

文章数量:1410697

My issue is somewhat similar to this SO question. However, since my implementation is a bit different, i've created a new question.

I have a page where back button is to be disabled (got the script after a lot of googling). What this page does is that it redirects to a different location (ASP.NET MVC controller action). Since the action takes time to plete, a wait message is displayed. Below is the script i've used to disable the back button and to redirect the page.

<script type="text/javascript">
    function changeHashOnLoad() {
        window.location.href += "#";
        setTimeout(changeHashAgain, 50);
    }

    function changeHashAgain() {
        window.location.href += "1";
    }

    var storedHash = window.location.hash;
    window.setInterval(function () {
        if (window.location.hash != storedHash) {
            window.location.hash = storedHash;
        }
    }, 50);

    //do after all images have finished loading
    $(window).load(function () {    
        changeHashOnLoad();        
        //show the wait message
        $("#domWaitMessage").show();
        //redirect to the new page/controller action
        window.location.href = document.forms[0].action;
    });
</script>

My above code works in IE and Firefox but not in Chrome. Screen flickers a lot in Opera but redirection still works. In Chrome, the action in my controller does get called and the processing happens but the page isn't redirected after the processing is done. Most of you guys might feel the need to change the flow/implementation, but i don't have a say in the matter so got to stick with this flow.

Platform: ASP.NET MVC 2.0
jQuery Version: 1.4.1
Chrome Version: 16.0.912.63m

UPDATE:

Below are the screen shots taken from fiddler and chrome network tab.

Fiddler:
Fiddler Screenshot .png

Chrome:
Chrome Screenshot .png

HTML

<html xmlns="">
<head runat="server">
    <title>Dummy Title</title>
</head>
<body>
    <form id="form1" method="post" action="Home/BookingConfirmation">    
        <div id="domWaitMessage">
            <img src="Content/images/preloader.gif" alt="Please Wait...." />
        </div>    
    </form>
</body>
</html>

UPDATE WORKING SCRIPT

<script type="text/javascript">
    function changeHashOnLoad() {
        window.location.href += "#";
        setTimeout(changeHashAgain, 50);
    }

    function changeHashAgain() {
        window.location.href += "1";
    }

    var storedHash = window.location.hash;
    window.setInterval(function () {
        if (window.location.hash != storedHash) {
            window.location.hash = storedHash;
        }
    }, 50);

    //do after all images have finished loading
    $(window).load(function () {    
        changeHashOnLoad();        
        //show the wait message
        $("#domWaitMessage").show();
        //ORIGINAL REDIRECTION CODE
        //window.location.href = document.forms[0].action;
        //NEW WORKING REDIRECTION CODE
        setTimeout(function () { window.location.href = document.forms[0].action; }, 100);
    });
</script>

My issue is somewhat similar to this SO question. However, since my implementation is a bit different, i've created a new question.

I have a page where back button is to be disabled (got the script after a lot of googling). What this page does is that it redirects to a different location (ASP.NET MVC controller action). Since the action takes time to plete, a wait message is displayed. Below is the script i've used to disable the back button and to redirect the page.

<script type="text/javascript">
    function changeHashOnLoad() {
        window.location.href += "#";
        setTimeout(changeHashAgain, 50);
    }

    function changeHashAgain() {
        window.location.href += "1";
    }

    var storedHash = window.location.hash;
    window.setInterval(function () {
        if (window.location.hash != storedHash) {
            window.location.hash = storedHash;
        }
    }, 50);

    //do after all images have finished loading
    $(window).load(function () {    
        changeHashOnLoad();        
        //show the wait message
        $("#domWaitMessage").show();
        //redirect to the new page/controller action
        window.location.href = document.forms[0].action;
    });
</script>

My above code works in IE and Firefox but not in Chrome. Screen flickers a lot in Opera but redirection still works. In Chrome, the action in my controller does get called and the processing happens but the page isn't redirected after the processing is done. Most of you guys might feel the need to change the flow/implementation, but i don't have a say in the matter so got to stick with this flow.

Platform: ASP.NET MVC 2.0
jQuery Version: 1.4.1
Chrome Version: 16.0.912.63m

UPDATE:

Below are the screen shots taken from fiddler and chrome network tab.

Fiddler:
Fiddler Screenshot http://img43.imageshack.us/img43/638/200response.png

Chrome:
Chrome Screenshot http://img594.imageshack.us/img594/6381/chromenetwork.png

HTML

<html xmlns="http://www.w3/1999/xhtml">
<head runat="server">
    <title>Dummy Title</title>
</head>
<body>
    <form id="form1" method="post" action="Home/BookingConfirmation">    
        <div id="domWaitMessage">
            <img src="Content/images/preloader.gif" alt="Please Wait...." />
        </div>    
    </form>
</body>
</html>

UPDATE WORKING SCRIPT

<script type="text/javascript">
    function changeHashOnLoad() {
        window.location.href += "#";
        setTimeout(changeHashAgain, 50);
    }

    function changeHashAgain() {
        window.location.href += "1";
    }

    var storedHash = window.location.hash;
    window.setInterval(function () {
        if (window.location.hash != storedHash) {
            window.location.hash = storedHash;
        }
    }, 50);

    //do after all images have finished loading
    $(window).load(function () {    
        changeHashOnLoad();        
        //show the wait message
        $("#domWaitMessage").show();
        //ORIGINAL REDIRECTION CODE
        //window.location.href = document.forms[0].action;
        //NEW WORKING REDIRECTION CODE
        setTimeout(function () { window.location.href = document.forms[0].action; }, 100);
    });
</script>
  • javascript
  • jquery
  • asp-mvc
Share edited May 23, 2017 at 11:45 CommunityBot 11 silver badge asked Dec 27, 2011 at 11:30 Sang SuantakSang Suantak 5,2652 gold badges30 silver badges46 bronze badges 2
  • 2 I doubt this is the cause, but FYI, your setTimeout is weird in that you're using a string for your timeout duration. Also, you don't need a string for the function call. You can replace that line with this: setTimeout(changeHashAgain, 50); – Jacob Commented Dec 27, 2011 at 18:17
  • @Jacob, tried it but still doesn't work. But your suggestion looks much cleaner, thanks!. – Sang Suantak Commented Dec 28, 2011 at 4:45
Add a ment  | 

3 Answers 3

Reset to default 5 +100

In fact, this is what happens :

  1. The function changeHashOnLoad() set a timeout in order to store a second hash in the history (the '#1'). But the function is not executed now (it will be in 50ms)

  2. The main code continues to run to the line doing the redirection to document.forms[0].action

  3. Now only : the timeouted function changeHashAgain () is executed. The page is redirected to '#1' and the redirection to document.forms[0].action is canceled

A simple and quick workaround : delay the main redirection.

setTimeout(function () { window.location.href = document.forms[0].action; },100);

So you can say "Why Chrome ?" ? Chrome and his javascript engine V8 is just much faster than other browsers. In 50ms, chrome has still begun the redirection, while FF and IE not !

Instead of using getAttribute("action") try like this:

window.location.href = document.forms[0].action;

This works for me in chrome. As you didn't provide the full code, it is hard to tell where the error is, but it doesn't seem to be in the code above.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="class.css" />
        <script src="http://ajax.googleapis./ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript">
    function changeHashOnLoad() {
        window.location.href += "#";
        setTimeout(changeHashAgain, 50);
    }

    function changeHashAgain() {
        window.location.href += "1";
    }

    var storedHash = window.location.hash;
    window.setInterval(function () {
        if (window.location.hash != storedHash) {
            window.location.hash = storedHash;
        }
    }, 50);

    //do after all images have finished loading
    $(window).load(function () {    
        changeHashOnLoad();

        //show the wait message
        $("#domWaitMessage").show();
        //redirect to the new page/controller action
        window.location.href = document.forms[0].action;
    });
</script>
    </head>
    <body>
    <form method="post" action="gotothispage.page">
    <div style="display: none" id="domWaitMessage">HELLO</div>
    </form>
    </body>
</html>

本文标签： jqueryJavascript redirection issue with Google ChromeStack Overflow

版权声明：本文标题：jquery - Javascript redirection issue with Google Chrome - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744926128a2632608.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。