Loading a css file into a webpage dynamically?
I'm a little confused on this topic mainly because I'm not quite sure how javascript loads in HTML. Currently, I have an "onload" method being called in the <body> tag. It calls a javascript function; checkBrowser() to check what kind of browser is being used. I normally have all my javascript library calls at the top of my HTML page as do I have my CSS file calls.
Where is my HTML page is the correct place to load Javascript & CSS files? Currently, the below script is at the bottom of my HTML page.
Code:
function checkBrowser() {
var navUserAgent = navigator.userAgent;
var browserName = navigator.appName;
var tempVersionOffset;
HtmlLink css = new HtmlLink();
css.Href = ResolveClientUrl("css/style.css");
css.Attributes["rel"] = "stylesheet";
css.Attributes["type"] = "text/css";
css.Attributes["media"] = "all";
if ((tempVersionOffset = navUserAgent.indexOf("Opera")) != -1) {
browserName = "Opera";
css.Href = ResolveClientUrl("css/StyleSheet.css");
} else if ((tempVersionOffset = navUserAgent.indexOf("MSIE")) != -1) {
browserName = "Microsoft Internet Explorer";
css.Href = ResolveClientUrl("css/StyleSheet.css");
} else if ((tempVersionOffset = navUserAgent.indexOf("Chrome")) != -1) {
browserName = "Chrome";
css.Href = ResolveClientUrl("css/chrome.css");
} else if ((tempVersionOffset = navUserAgent.indexOf("Safari")) != -1) {
browserName = "Safari";
css.Href = ResolveClientUrl("css/safari.css");
} else if ((tempVersionOffset = navUserAgent.indexOf("Firefox")) != -1) {
browserName = "Firefox";
css.Href = ResolveClientUrl("css/firefox.css");
} else if ((tempVersionOffset = navUserAgent.indexOf("Edg")) != -1) {
browserName = "Edge";
css.Href = ResolveClientUrl("css/edge.css");
}
Page.Header.Controls.Add(css);
css.Href = ResolveClientUrl("css/nav.css");
Page.Header.Controls.Add(css);
alert("BrowserName = " + browserName);
}
Thanks,
