2012-06-29 17 views
1

我想根據用戶代理(mobile,即chrome-ff)劃分我的樣式和腳本。如何控制和允許包含或不包含?如何劃分asp.net中的腳本和樣式?

也許因爲我可以使用<! - [if IE]>,但其他人怎麼樣? 有人指點我,PLZ,THX

<head runat="server" id="head"> 
    <%--Only mobile--%> 
     <link href="Styles/CommonMobile.css" rel="stylesheet" type="text/css"/> 
     <link href="Styles/SiteMobile.css" rel="stylesheet" type="text/css"/> 
     <script src="Scripts/CommonMobile.js" type="text/javascript"></script> 
     <script src="Scripts/SiteMobile.js" type="text/javascript"></script> 

    <%--All but IE --%> 
     <link href="Styles/GeneralView.css" rel="stylesheet" type="text/css" /> 
     <script src="Scripts/GeneralView.js" type="text/javascript"></script> 

    <%--Only IE --%> 
     <link href="Styles/IE.css" rel="stylesheet" type="text/css" /> 
     <script src="Scripts/IE.js" type="text/javascript"></script> 


    <%--Always--%> 
     <link href="Styles/Common.css" rel="stylesheet" type="text/css" /> 
     <script src="Scripts/Common.js" type="text/javascript"></script> 
</head> 
+1

您是否嘗試過使用'Request.Browser'類? – Kane

回答

2

一個很好的方式是用文字來扭曲他們打開它,或者不上後面的代碼。我說Literal是因爲它是可以在頭文件中運行的少數控件之一,並且不需要額外的代碼。

所以我這樣做的

<asp:Literal runat="server" ID="OnlyIE" EnableViewState="false" Visible="false"> 
     <link href="Styles/IE.css" rel="stylesheet" type="text/css" /> 
     <script src="Scripts/IE.js" type="text/javascript"></script> 
</asp:Literal> 

protected void Page_Load(object sender, EventArgs e) 
{ 
    if (Request.Browser.Browser == "IE") 
    { 
     OnlyIE.Visible = true; 
    } 
} 

[*]測試工作。

另一種方法是再次使用Request.Browser.Browser並在Literal中再次完全呈現css和javascript,或者更難以使用Controls.Add創建控件,但所有這些都比這更多的代碼。

1

你也可以從服務器端代碼註冊javascript和css。

像下面

string source = "mobile" // set your source over here i.e. mobile , IE , etc 

if (source == "mobile") 
{ 

    if (!Page.ClientScript.IsClientScriptIncludeRegistered(this.GetType(), "Common")) 
    { 
    Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "Common", this.Page.ResolveClientUrl("~/Scripts/Common.js")); 
    } 
    if (!Page.ClientScript.IsClientScriptIncludeRegistered(this.GetType(), "Common")) 
    { 
    Page.ClientScript.RegisterClientScriptInclude(this.GetType(), "CommonCss", this.Page.ResolveClientUrl("~/Styles/Common.css")); 
    } 
} 

希望這將幫助你..happy編碼

1

更可靠的方法檢測瀏覽器。

var browser="";  
var isOpera = !!(window.opera && window.opera.version); // Opera 8.0+ 
if(isOpera){ 
string="opera" 
} 
var isFirefox = testCSS('MozBoxSizing'); // FF 0.8+ 
if(isFirefox){ 
string="firefox" 
}    
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0; 
     // At least Safari 3+: "[object HTMLElementConstructor]" 
if(isSafari){ 
string="safari" 
} 
var isChrome = !isSafari && testCSS('WebkitTransform'); // Chrome 1+ 
if(isChrome){ 
string="chrome" 
} 
var isIE = /*@[email protected]*/false || testCSS('msTransform'); // At least IE6 
if(isIE){ 
string="IE" 
} 
if(browser==""){ 
browser="mobile"; 
} 

var ss = document.createElement("link"); 
ss.type = "text/css"; 
ss.rel = "stylesheet"; 
if(browser=="IE"){ 
ss.href = "Styles/"+browser+".css"; 
} 
else{ 
ss.href = "Styles/GeneralView.css"; 
} 
if(browser=="mobile"){ 
ss.href = ss.href = "Styles/GeneralView.css"; 
var ss2 = document.createElement("link"); 
ss2.type = "text/css"; 
ss2.rel = "stylesheet"; 
ss2.href = var ss = document.createElement("link"); 
ss.type = "text/css"; 
ss.rel = "stylesheet"; 
ss.href = "style.css"; 
document.getElementsByTagName("head")[0].appendChild(ss); 
} 
document.getElementsByTagName("head")[0].appendChild(ss2); 

    } 
Similarly with javascript files.