Apply javascript for mobile or desktop only - Stack Overflow

admin管理员组

文章数量:1431014

I have 2 scripts one that I would like to use for any screen width less than 990px and another for anything greater. These scripts e from a 3rd party and only work on the actual domain (so testing will be hard for anyone else).

Here are the scripts they gave me:

For mobile:

<script>
    (function(){
        var t = document.getElementsByTagName("script")[0];
        var s = document.createElement("script"); s.async = true;
        s.src = "//integration.nfusionsolutions.biz/client/jh/widget/module/accordionchart/nfaccordion";
        t.parentNode.insertBefore(s, t);
    })();
    </script>

For Desktop:

<script>
    (function(){
                var t = document.getElementsByTagName("script")[0];
                var s = document.createElement("script"); s.async = true;
                s.src = "//integration.nfusionsolutions.biz/client/jh/widget/module/spottableextended/nfspotextended";
                t.parentNode.insertBefore(s, t);
    })();
    </script>

I have tried this for the desktop view but I know something is off.

For Desktop:

 <script>

        (function(){
        var viewportWidth = $(window).width();
        if (viewportWidth > 900) {
                    var t = document.getElementsByTagName("script")[0];
                    var s = document.createElement("script"); s.async = true;
                    s.src = "//integration.nfusionsolutions.biz/client/jh/widget/module/spottableextended/nfspotextended";
                    t.parentNode.insertBefore(s, t);
       } })();
        </script>

Any suggestions?

UPDATE*** Code based on response below

    <script>
if ( $(window).width() > 990) {     
  (function(){
                var t = document.getElementsByTagName("script")[0];
                var s = document.createElement("script"); s.async = true;
                s.src = "//integration.nfusionsolutions.biz/client/jackhunt/widget/module/spottableextended/nfspotextended";
                t.parentNode.insertBefore(s, t);
    })();
}
else {
  (function(){
        var t = document.getElementsByTagName("script")[0];
        var s = document.createElement("script"); s.async = true;
        s.src = "//integration.nfusionsolutions.biz/client/jackhunt/widget/module/accordionchart/nfaccordion";
        t.parentNode.insertBefore(s, t);
    })();
}
</script>

I have 2 scripts one that I would like to use for any screen width less than 990px and another for anything greater. These scripts e from a 3rd party and only work on the actual domain (so testing will be hard for anyone else).

Here are the scripts they gave me:

For mobile:

<script>
    (function(){
        var t = document.getElementsByTagName("script")[0];
        var s = document.createElement("script"); s.async = true;
        s.src = "//integration.nfusionsolutions.biz/client/jh/widget/module/accordionchart/nfaccordion";
        t.parentNode.insertBefore(s, t);
    })();
    </script>

For Desktop:

<script>
    (function(){
                var t = document.getElementsByTagName("script")[0];
                var s = document.createElement("script"); s.async = true;
                s.src = "//integration.nfusionsolutions.biz/client/jh/widget/module/spottableextended/nfspotextended";
                t.parentNode.insertBefore(s, t);
    })();
    </script>

I have tried this for the desktop view but I know something is off.

For Desktop:

 <script>

        (function(){
        var viewportWidth = $(window).width();
        if (viewportWidth > 900) {
                    var t = document.getElementsByTagName("script")[0];
                    var s = document.createElement("script"); s.async = true;
                    s.src = "//integration.nfusionsolutions.biz/client/jh/widget/module/spottableextended/nfspotextended";
                    t.parentNode.insertBefore(s, t);
       } })();
        </script>

Any suggestions?

UPDATE*** Code based on response below

    <script>
if ( $(window).width() > 990) {     
  (function(){
                var t = document.getElementsByTagName("script")[0];
                var s = document.createElement("script"); s.async = true;
                s.src = "//integration.nfusionsolutions.biz/client/jackhunt/widget/module/spottableextended/nfspotextended";
                t.parentNode.insertBefore(s, t);
    })();
}
else {
  (function(){
        var t = document.getElementsByTagName("script")[0];
        var s = document.createElement("script"); s.async = true;
        s.src = "//integration.nfusionsolutions.biz/client/jackhunt/widget/module/accordionchart/nfaccordion";
        t.parentNode.insertBefore(s, t);
    })();
}
</script>

• javascript

Share Improve this question Follow edited Apr 4, 2016 at 14:25 Matt L asked Apr 4, 2016 at 14:18 Matt LMatt L 4533 silver badges1313 bronze badges 3

• the site does not use jquery. – Matt L Commented Apr 4, 2016 at 14:21
• If the site doesn't use jQuery you can't use a jQuery object such as $(window) and neither methods such as .width(). Get the size of the screen, current web page and browser window has an vanilla javascript method for getting the window size. Please note that this javascript is only executed ONCE and it checks the page width when the page LOADS - if you resize your window afterwards it won't reexecute the code. – h2ooooooo Commented Apr 4, 2016 at 14:28
• I added jquery to load, this on in particular but it still does not work. <script src="ajax.googleapis./ajax/libs/jquery/2.2.2/…> – Matt L Commented Apr 4, 2016 at 14:29

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

If you're not using jQuery, you can't use a jQuery method. Use the following condition instead:

if (window.innerWidth > 900) { // code for large screens

You can use sompething like this, if you have size screen informations :

if ( $(window).width() > 990) {     
  //Add your javascript for large screens here
}
else {
  //Add your javascript for small screens here
}

EDIT : if really jQuery can't be used, you can try to use :

window.innerWidth

to get the width. But it'll depend too of the resized window...!

本文标签： Apply javascript for mobile or desktop onlyStack Overflow