locked
How can I raw js&css more convenient by code? RRS feed

  • Question

  • User1052024640 posted

    I want to show different css&js  in different browsers.

    I do it like this:

    @{

    string APPJS = "";
    string APPCSS = "";
    if (G.IsIE == true)
    {
    APPJS = "<script type='text/javascript' src=/lib/jquery-1.12.4.min.js></script>";
    APPJS += "<script type='text/javascript' src=/js/appIE.min.js></script>";
    }
    else
    {
    APPCSS = "<link rel='stylesheet' href = '/css/animate.min.css' >";
    APPJS = "<script src=/lib/jquery-3.2.1.min.js></script>";
    APPJS = "<script src=/lib/wow.min.js></script>";
    APPJS += "<script src=/js/app.min.js></script>";
    APPJS += "<script type='text/javascript' src=/js/app.min.js></script>";
    }

    }
    @Html.Raw(APPCSS)
    @Html.Raw(APPJS)

    Yes, it works. However, every time I add/edit some CSS or js, it will take me some minute to check if the string I add is right. What's more, I think my way is not the best way to achieve this.

    Is there any way better to achieve this? Thank you.

    Saturday, August 10, 2019 7:33 AM

Answers

  • User711641945 posted

    Hi mywatermelon,

    Here is two ways for you,first way is a working demo as below:

    @section Scripts{
    <script type="text/javascript"> var cssId = 'myCss'; var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); var script = document.createElement('script'); link.id = cssId; link.rel = 'stylesheet'; link.type = 'text/css'; link.media = 'all'; var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; var isFirefox = typeof InstallTrigger !== 'undefined'; var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0; var isChrome = !!window.chrome && !isOpera; var isIE = false || !!document.documentMode; if (!document.getElementById(cssId)){ var output = ""; if(isFirefox){ output += "Firefox"; link.href = '/css/firefox.css'; head.appendChild(link); } else if(isChrome){ output += "Chrome"; link.href = '/css/chrome.css'; head.appendChild(link); } else if(isSafari){ output += "Safari"; link.href = '/css/safari.css'; head.appendChild(link); } else if(isOpera){ output += "Opera"; link.href = '/css/opera.css'; head.appendChild(link); } else if(isIE){ output += "IE"; link.href = '/css/ie.css'; head.appendChild(link); script.setAttribute('src', '/js/ie.js'); head.appendChild(script); } } </script>
    }

    The second way is a suggestion.For I don't know how did you get G.IsIE,you could try as below:

    @if (G.IsIE = true)
    {
        <script type='text/javascript' src=/lib/jquery-1.12.4.min.js></script>
        <script type='text/javascript' src=/js/appIE.min.js></script>
    }
    else {
    <link rel='stylesheet' href='/css/animate.min.css'>
    <script src=/lib/jquery-3.2.1.min.js></script>
    }

    Best Regards,

    Rena

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 12, 2019 6:13 AM

All replies

  • User711641945 posted

    Hi mywatermelon,

    Here is two ways for you,first way is a working demo as below:

    @section Scripts{
    <script type="text/javascript"> var cssId = 'myCss'; var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); var script = document.createElement('script'); link.id = cssId; link.rel = 'stylesheet'; link.type = 'text/css'; link.media = 'all'; var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; var isFirefox = typeof InstallTrigger !== 'undefined'; var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0; var isChrome = !!window.chrome && !isOpera; var isIE = false || !!document.documentMode; if (!document.getElementById(cssId)){ var output = ""; if(isFirefox){ output += "Firefox"; link.href = '/css/firefox.css'; head.appendChild(link); } else if(isChrome){ output += "Chrome"; link.href = '/css/chrome.css'; head.appendChild(link); } else if(isSafari){ output += "Safari"; link.href = '/css/safari.css'; head.appendChild(link); } else if(isOpera){ output += "Opera"; link.href = '/css/opera.css'; head.appendChild(link); } else if(isIE){ output += "IE"; link.href = '/css/ie.css'; head.appendChild(link); script.setAttribute('src', '/js/ie.js'); head.appendChild(script); } } </script>
    }

    The second way is a suggestion.For I don't know how did you get G.IsIE,you could try as below:

    @if (G.IsIE = true)
    {
        <script type='text/javascript' src=/lib/jquery-1.12.4.min.js></script>
        <script type='text/javascript' src=/js/appIE.min.js></script>
    }
    else {
    <link rel='stylesheet' href='/css/animate.min.css'>
    <script src=/lib/jquery-3.2.1.min.js></script>
    }

    Best Regards,

    Rena

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 12, 2019 6:13 AM
  • User1052024640 posted

    It seems the first way is much more inconvenience.

    What's more, I get the G.IsIE by creating a new class Global.cs:

    public class Global
    {
    public bool IsIE { get { return _IsIE; } }
    bool _IsIE;
    public Global(IHttpContextAccessor accessor)
    {

    string UA = accessor.HttpContext.Request.Headers["User-Agent"].ToString();
    if (UA.Contains("Trident") || UA.Contains("MSIE"))
    {
    _IsIE = true;
    }
    else
    {
    _IsIE = false;
    }
    }
    }

    And injet it to the _ViewImports.cshtml:

    @inject Global G;

    I only use it to know whether is IE browser only.

    I did it in code-behind but not front-end for I want the CSS to render first but not waiting the js complete.

    Monday, August 12, 2019 6:26 AM
  • User711641945 posted

    Hi mywatermelon,

    You could use the second way and you are no need to check the string right or not, it would automatically prompt.

    Best Regards,

    Rena

    Monday, August 12, 2019 9:52 AM
  • User1052024640 posted

    Thank you so much, Miss.Ni

    Tuesday, August 13, 2019 12:46 AM