Question

当我点击重定向按钮时，asp.net项目重定向一个html文件并向用户显示加载器（动画gif）。然后它重定向到特定页面。它的工作正常。

但现在我不需要重定向页面中间件。当我单击重定向按钮时，它显示特定的asp页面，加载器（动画gif）显示在同一页面中心，直到它加载。页面加载后 - 加载器（动画gif）必须隐藏。我怎样才能做到这一点？。举一个例子。

C＃代码 -

Response.Redirect("Redirecting.html?AvailResults.aspx");

Redirecting.html代码 -

<body>
<div style='position:absolute;z-index:5;top:45%;left:45%;'>
    <img id="imgAjax" alt="loading..." title="loading..." src="images/ajax-loading.gif" style="width: 100px; height: 100px" /><br /> <br />
 </div>

<script type="text/javascript">
    /* <![CDATA[ */
    this.focus(); //focus on new window

    redirect = function() {
        var querystring = window.location.search.substring(1); //first query string
        var page = querystring.substring(querystring.indexOf('=') + 1, querystring.length);
        function toPage() {
            if (page !== undefined && page.length > 1) {
                document.write('<!--[if !IE]>--><head><meta http-equiv="REFRESH" content="1;url=' + page + '" /><\/head><!--<![endif]-->');
                document.write(' \n <!--[if IE]>');
                document.write(' \n <script type="text/javascript">');
                document.write(' \n var version = parseInt(navigator.appVersion);');
                document.write(' \n if (version>=4 || window.location.replace) {');
                document.write(' \n window.location.replace("' + page + '");');
                document.write(' document.images["imgAjax"].src = "images/ajax-loading.gif"');
                document.write(' \n } else');
                document.write(' \n window.location.href="' + page + '";');
                document.write(' \n  <\/script> <![endif]-->');
            }
        }
        return {
            begin: toPage
        }
    } ();

    redirect.begin();

    /* ]]> */
</script>  
</body>

Answer 1

这里的问题是你不能删除中间步骤并在不同的URL上显示/隐藏你的微调器（你在加载时已经重定向）。您需要一个页面来加载ajax微调器。我看到两个选择：

选项1：回到你的方式（点击重定向按钮，转到带有微调器的重定向页面，然后重定向到最终目的地）。这类似于“你现在正在离开xyz.com”论坛经常使用的启动页面......

选项2：将iFrame添加到重定向页面，这样您就可以同时显示/隐藏微调器并加载目标页面（在iframe中）。（如果您在应用程序中重定向到自己的页面或保持主机相同，则应该能够避免跨站点问题并确保目标页面不包含帧分支脚本等）

这可能是这样的：

<div style='position:absolute;z-index:5;top:45%;left:45%;'>
  <img id="imgAjax" alt="loading..." title="loading..." src="images/ajax-loading.gif" style="width: 100px; height: 100px" />
</div>

<iframe src="about:blank" id="ifRedir" onload="$('#imgAjax').hide();" style="width:100%;height:100%;border:0px;"</iframe>

<script type="text/javascript">
    $(document).ready(function () {
        $('#ifRedir').attr('src', location.search.substr(1));
    });
</script>

我认为框架中的子页面在完成加载时告诉父框架符号总是更好（您可以通过window.onload和“parent。”调用来执行此操作）。如果没有这种类型的交互，页面将在所有页面资源（图像）完全加载之前加载（并隐藏加载微调器）。

您可以通过删除代码而不是使用：

来避免这种情况

<script type="text/javascript">
    $(document).ready(function () {
        $('#ifRedir').attr('src', location.search.substr(1));
        setTimeout(function () { $('#imgAjax').hide(); }, 1000);
    });
</script>

显示动画的gif文件，直到重定向asp页面加载？

1 个答案: