Call external JS file based on “media screen” valu

2019-08-19 16:16发布

我想这一点,但它不工作:

<html>
<head>
<script src="js/menu-collapser.js" type="text/javascript" media="media screen and (max-width: 599px)"></script>
</head>
...
</html>

//menu-collapser.js:

jQuery(document).ready(function($){
    $('.main-navigation li ul').hide();
    $('.main-navigation li').has('ul').click(function() {
        $(this).children().toggle();
    });
});

你对如何做到这一点的方法不对的想法? 如果直接与标签头中使用的脚本工作。

Answer 1:

你不能这样做,直接使用Javascript <script>标记。 媒体查询在链接CSS文件或内嵌CSS样式使用。 一个基本的例子:

<link rel="stylesheet" media="screen and (min-width: 900px)" href="desktop.css"/>
<link rel="stylesheet" media="screen and (min-width: 571px)" href="tablet.css"/>
<link rel="stylesheet" media="screen and (max-width: 570px)" href="mobile.css"/>

或直接在您的样式表:

@media screen and (max-width: 599px) {
  #mobile {
     display: block;
  }
}

但是,您可以使用外部资产装载机/媒体查询库做到这一点( require.js , modernizr.js , enquire.js等),在这种情况下,我设置使用一个例子enquire.js ,因为我认为这是非常有效的,默认情况下并不需要jQuery的:

完整的示例

1)包含enquire.js(可在这里 ):

<script type="text/javascript" src="/js/enquire.js"></script>

2)创建一个负载功能-加载JS文件:

<script type="text/javascript">

// This loads JS files in the head element
    function loadJS(url)
    {
        // adding the script tag to the head
       var head = document.getElementsByTagName('head')[0];
       var script = document.createElement('script');
       script.type = 'text/javascript';
       script.src = url;

       // fire the loading
       head.appendChild(script);
    }

</script>

3)消防enquire.js和监听媒体查询的变化(包括上载和调整大小):

<script type="text/javascript">

    enquire.register("screen and (max-width: 599px)", {
        match : function() {
            // Load a mobile JS file
            loadJS('mobile.js');
        }
    }).listen();


    enquire.register("screen and (min-width: 600px) and (max-width: 899px)", {
        match : function() {
            // Load a tablet JS file
            loadJS('tablet.js');
            //console.log('tablet loaded');
        }
    }).listen();


    enquire.register("screen and (min-width: 900px)", {
        match : function() {
            // Load a desktop JS file
            loadJS('desktop.js');
            //console.log('desktop loaded');
        }
    }).listen();
</script>


全部放在一起

使用一个简单的HTML页面从外部文件加载enquire.js:

<html>
<head>

<script type="text/javascript" src="/enquire.js"></script>

<script type="text/javascript">

// This loads JS files in the head element
    function loadJS(url)
    {
        // adding the script tag to the head
       var head = document.getElementsByTagName('head')[0];
       var script = document.createElement('script');
       script.type = 'text/javascript';
       script.src = url;

       // fire the loading
       head.appendChild(script);
    }

</script>

<style>

    body {
      font-family: arial;
    }
    h1 {
      font-size: 50pt;
    }

    #mobile {
      display: none;
    }
    #tablet {
      display: none;
    }
    #desktop {
      display: none;
    }

    @media screen and (max-width: 599px) {
        #mobile {
            display: block;
        }
    }

    @media screen and (min-width: 600px) and (max-width: 899px) {
        #tablet {
            display: block;
        }
    }

    @media screen and (min-width: 900px) {
        #desktop {
            display: block;
        }
    }   

</style>

</head>
<body>

    <div id="desktop">
        <h1>Desktop</h1>
    </div>

    <div id="tablet">
        <h1>Tablet</h1>
    </div>

    <div id="mobile">
        <h1>Mobile</h1>
    </div>

    <script type="text/javascript">

        enquire.register("screen and (max-width: 599px)", {
            match : function() {
                // Load a JS file
                loadJS('mobile.js');
            }
        }).listen();


        enquire.register("screen and (min-width: 600px) and (max-width: 899px)", {
            match : function() {
                loadJS('tablet.js');
                //console.log('tablet loaded');
            }
        }).listen();


        enquire.register("screen and (min-width: 900px)", {
            match : function() {
                loadJS('desktop.js');
                //console.log('desktop loaded');
            }
        }).listen();

    </script>
</body>
</html>

除了加载JS文件,你可以创建一个CSS加载程序过多,这会以同样的方式(有条件)工作,但失去了使用的对象@media CSS中。 这是值得一读的用法解释为enquire.js ,因为它可以做多了很多,比我在这里说明。

警告:上面没有使用jQuery的,但你可以利用一些它提供的功能; 加载例如脚本 - 或执行,你需要其他的功能。



Answer 2:

为什么不直接在脚本加载条件?

(function() {
    if( window.innerWidth > 600 ) {
        var theScript = document.createElement('script');
            theScript.type = 'text/javascript';
            theScript.src = 'js/menu-collapser.js';

        var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(theScript, s);
    }
})();

或者更好的是,只执行如果window.innerWidth> 600的代码? 总之,有很多可以使用的解决方案。



Answer 3:

media是不是一个有效的属性<script>检查它在这里 。

所以,你应该通过手动比检测介质类型动态加载脚本。

有一个插件,在javascript CSS媒体检测 ,你可以使用它。

<script type="text/javascript" src="js/mediatypechecker.js"></script>

$(function() {
    if(IsMediaType('screen') > 0 && parseInt(screen.width) < 599) {
        $.getSscript("js/menu-collapser.js");
    }
});


文章来源: Call external JS file based on “media screen” value