zoukankan      html  css  js  c++  java
  • .net 动态加载css与js

    我在项目的根目下建了一个名为和JScript.js和StyleSheet.css文件。前端页面放了一个Div和input。div用于使用样式,input用于测试js.

    JScript.js的内容为:

    function funMessageShow() {
        alert(
    "测试加载Js");
    }

    StyleSheet.css的内容为:

    .testCss
    {
        background-color
    :Gray;
    }

    前端页面的html源码为:

        <form id="form1" runat="server">
        
    <div class="testCss">
            测试加载Css
        
    </div>
        
    <input id="btnShow" type="button" value="测试加载js" onclick="return funMessageShow();" />
        
    </form>

    现在要从后台动态加载它们。

    加载Css的主要代码为:

    代码
        /// <summary>
        
    /// 正常加载CSS
        
    /// </summary>
        
    /// <param name="pPage">要加载的页面</param>
        
    /// <param name="sStyleLink">样式url</param>
        public void LinkStyle(Page pPage, string sStyleLink)
        {
            System.Web.UI.HtmlControls.HtmlLink hlLink = new System.Web.UI.HtmlControls.HtmlLink(); 
            hlLink.Attributes.Add("rel""stylesheet");
            hlLink.Attributes.Add("type""text/css");
            hlLink.Attributes.Add("href", sStyleLink);
            Page.Header.Controls.Add(hlLink);
                   
        }

    加载Js的代码为

    代码
        /// <summary>
        
    /// 正常加载Js
        
    /// </summary>
        
    /// <param name="pPage">要加载的页面</param>
        
    /// <param name="sJsUrl">js的url</param>
        public void LinkJs(Page pPage, string sJsUrl)
        {
            System.Web.UI.HtmlControls.HtmlGenericControl hgcLoadJs = new System.Web.UI.HtmlControls.HtmlGenericControl();
            hgcLoadJs.TagName = "script";
            hgcLoadJs.Attributes.Add("type""text/javascript");
            hgcLoadJs.Attributes.Add("src", Page.ResolveClientUrl(sJsUrl)); //ResolveClientUrl:获取浏览器可以使用的 URL
            Page.Header.Controls.Add(hgcLoadJs);

        }

    后台完整的代码如下,包含对是否已加载的判断代码。

    代码
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;

    public partial class _Default : System.Web.UI.Page
    {
        
    protected void Page_Load(object sender, EventArgs e)
        {
            
    if (!IsPostBack)
            {
                
    string sThisJsUrl = "JScript.js";
                
    string sThisStyleUrl = "StyleSheet.css";          
                LinkStyle(this.Page, sThisStyleUrl);
                LinkJs(this.Page, sThisJsUrl);
                
    //ReferenceAjaxScript(this.Page, sThisJs);
                
    //ReferenceJs(this.Page, sThisJs, sThisJs);
                judgeCssExist(sThisStyleUrl);
                judgeJsExist(sThisJsUrl);
            }
        }

        

        
    #region 加载Css
        
    /// <summary>
        
    /// 正常加载CSS
        
    /// </summary>
        
    /// <param name="pPage">要加载的页面</param>
        
    /// <param name="sStyleLink">样式url</param>
        public void LinkStyle(Page pPage, string sStyleLink)
        {
            System.Web.UI.HtmlControls.HtmlLink hlLink = new System.Web.UI.HtmlControls.HtmlLink(); 
            hlLink.Attributes.Add("rel""stylesheet");
            hlLink.Attributes.Add("type""text/css");
            hlLink.Attributes.Add("href", sStyleLink);
            Page.Header.Controls.Add(hlLink);
                   
        }
        
    //加css不同法,功能与上边方法相同
        public void LinkStyle2(Page pPage, string sStyleLink)
        {
            System.Web.UI.HtmlControls.HtmlGenericControl objLink = new System.Web.UI.HtmlControls.HtmlGenericControl();
            objLink.TagName = "link";
            objLink.Attributes["rel"= "stylesheet";
            objLink.Attributes["type"= "text/css";
            objLink.Attributes["href"= sStyleLink;
            Page.Header.Controls.Add(objLink);
        }
        
    #endregion

        
    #region  加载Js
        
    /// <summary>
        
    /// 正常加载Js
        
    /// </summary>
        
    /// <param name="pPage">要加载的页面</param>
        
    /// <param name="sJsUrl">js的url</param>
        public void LinkJs(Page pPage, string sJsUrl)
        {
            System.Web.UI.HtmlControls.HtmlGenericControl hgcLoadJs = new System.Web.UI.HtmlControls.HtmlGenericControl();
            hgcLoadJs.TagName = "script";
            hgcLoadJs.Attributes.Add("type""text/javascript");
            hgcLoadJs.Attributes.Add("src", Page.ResolveClientUrl(sJsUrl)); //ResolveClientUrl:获取浏览器可以使用的 URL
            Page.Header.Controls.Add(hgcLoadJs);

        }
        
    /// <summary>
        
    /// 加载js
        
    /// </summary>
        
    /// <param name="pPage">要加载的页面</param>
        
    /// <param name="sJsName">js名称</param>
        
    /// <param name="sJsUrl">js的Url</param>
        public void ReferenceJs(Page pPage,string sJsName,string sJsUrl)
        {
            Type tPage = Page.GetType();
            ClientScriptManager csmManager = Page.ClientScript;
            
    if (!csmManager.IsClientScriptIncludeRegistered(tPage, sJsName))
            {
                csmManager.RegisterClientScriptInclude(tPage, sJsName, Page.ResolveClientUrl(sJsUrl));
            }
        }
        
    #endregion


        
    /// <summary>
        
    /// 在Ajax方式下加载Js
        
    /// </summary>
        
    /// <param name="pPage">要加载的页面</param>
        
    /// <param name="sJsUrl">js的url</param>
        public void ReferenceAjaxScript(Page pPage, string sJsUrl)
        {
            ScriptReference srReference = new ScriptReference(sJsUrl);
            ScriptManager smManager = ScriptManager.GetCurrent(pPage);
            
    if (smManager != null)
            {
                smManager.Scripts.Add(srReference);
            }
        }

        
    /// <summary>
        
    /// 判断Css是否已加载
        
    /// </summary>
        
    /// <param name="sCssUrl">css url</param>
        private void judgeCssExist(string sCssUrl)
        {
            ControlCollection ccCollection = Page.Header.Controls;
            
    if (ccCollection.Count > 0)
            {
                
    foreach (Control cItem in ccCollection)
                {
                    
    if (cItem.GetType() == typeof(System.Web.UI.HtmlControls.HtmlLink))
                    {
                        System.Web.UI.HtmlControls.HtmlLink hlLink = cItem as System.Web.UI.HtmlControls.HtmlLink;
                        
    if (hlLink.Attributes["href"].ToString() == sCssUrl)
                        {
                            Response.Write("此CSS已存在,无须加载!<br/>");
                        }
                    }
                }
            }
        }
        
    /// <summary>
        
    /// 判断js是否已加载
        
    /// </summary>
        
    /// <param name="sJsUrl">js url</param>
        private void judgeJsExist(string sJsUrl)
        {
            ControlCollection ccCollection = Page.Header.Controls;
            
    if (ccCollection.Count > 0)
            {
                
    foreach (Control cItem in ccCollection)
                {
                    
    if (cItem.GetType() == typeof(System.Web.UI.HtmlControls.HtmlGenericControl))
                    {
                        System.Web.UI.HtmlControls.HtmlGenericControl hgcControl = cItem as System.Web.UI.HtmlControls.HtmlGenericControl;
                        
    if (hgcControl.Attributes["src"].ToString() == sJsUrl)
                        {
                            Response.Write("此Js已存在,无须加载!<br/>");
                        }
                    }
                }
            }
        }

    }
  • 相关阅读:
    HDU-1754 I Hate It (树状数组模板题——单点更新,区间查询最大值)
    HDU-1166 敌兵布阵 (树状数组模板题——单点更新,区间求和)
    JavaScript dotAll模式
    ECMAScript6补全字符串长度方法padStart()和padEnd()
    ECMAScript6重复字符串方法repeat()
    JavaScript确定一个字符串是否包含在另一个字符串中的四种方法
    JavaScript中label与break配合使用
    JavaScript数据结构与算法-集合练习
    JavaScript数据结构与算法-散列练习
    JavaScript数据结构与算法-字典练习
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/1912593.html
Copyright © 2011-2022 走看看