每次加载页面时运行 javascript

Posted

技术标签:

【中文标题】每次加载页面时运行 javascript【英文标题】:Run javascript everytime page is loading 【发布时间】:2017-01-20 21:06:54 【问题描述】:

在我的 Web 应用程序中,我有一个包含加载栏的模式弹出窗口。我让它出现在任何我知道需要几秒钟才能执行的命令上,点击按钮等。

这目前运行良好,除了一个复杂的问题,它运行的内部网络服务器非常糟糕,并且根据用户数量可能会减慢导航到页面等简单任务的速度。

如何在每次页面考虑做某事时显示加载模式,而不必针对每个可能的场景进行硬编码?

我的 Web 应用程序正在使用包含模式代码的母版页。

谢谢

脚本

function ShowLoading() 
    $('#modalLoading').modal( backdrop: 'static', keyboard: false, show: true );


function HideLoading() 
    $('#modalLoading').modal('hide');

ASPX

<div id="modalLoading" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-body">
                <h2>
                    Please Wait...</h2>
                <div class="progress">
                    <div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 100%">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

C# 类

public void loadingAlert()

    var page = HttpContext.Current.CurrentHandler as Page;
    page.ClientScript.RegisterStartupScript(this.GetType(), "alert", "$(function ()  ShowLoading(); );", true); 

【问题讨论】:

【参考方案1】:

在您的 javascript 中设置 BeginRequestHandlerEndRequestHandler,如下所示:

$(document).ready(function () 
    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
);

function BeginRequestHandler(sender, args) 
    var postBackId = args._postBackElement.id;

    // Here you can add some exceptions if you want
    if (postBackId != "control_exception_1" && postBackId != "control_exception_2") 
        ShowLoading();
    


function EndRequestHandler(sender, args) 
    HideLoading();

最小的 ASP.NET 控件:form runat 服务器、ScriptManagerUpdatePanel。 您可以选择将UpdatePanelUpdateMode 设置为Conditional(在Triggers 中设置触发UpdatePanel 的控件的ID)或Always(您可以删除Triggers 元素)。

<form id="form" runat="server">
    <asp:ScriptManager ID="scriptManager" runat="server"></asp:ScriptManager>

    <asp:UpdatePanel ID="updatePanel" UpdateMode="Conditional" runat="server">
        <ContentTemplate>
            <%-- Your elements --%>
            <%-- Your buttons --%>
        </ContentTemplate>
        <Triggers>
            <asp:PostBackTrigger ControlID="btn_id" />
        </Triggers>
    </asp:UpdatePanel>
</form>

【讨论】:

【参考方案2】:

表格提交

您必须使用 Page.ClientScript.RegisterOnSubmitStatement(this.GetType(), "alert", "$(function () ShowLoading(); );");

将它放在基类或母版页中的“Page Init”或“Page Render”事件中,并使您的所有 aspx 页面都扩展此基类。

AJAX 请求

在这种情况下,您应该在 document 对象中附加 jquery 事件 ajaxSend。把它放在你的母版页中:

$( document).ajaxSend(function() 
   ShowLoading();
);

【讨论】:

以上是关于每次加载页面时运行 javascript的主要内容,如果未能解决你的问题,请参考以下文章

加载应用程序时的离子调用功能

每次刷新页面时重新加载数据表

每次重新加载页面时,如何强制资产渲染资产?

如何在每次加载页面时更改 php 变量的值? [复制]

每次访问页面时都会触发地理位置代码,而不仅仅是在初始加载或刷新时

Odoo 在每次页面加载时都会给我连接丢失消息