jquery 根据“media screen”值调用外部JS文件

3pmvbmvn 于 2023-01-12 发布在 jQuery

关注(0)|答案(4)|浏览(419)

我试过了，但没用：

<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();
    });
});

你有一个想法，如何做到这一点，在正确的方式？脚本的工作，如果直接使用的标题与标签。

jquery

来源：https://stackoverflow.com/questions/15823137/call-external-js-file-based-on-media-screen-value

4条答案

按热度按时间

eqzww0vc1#

你不能直接使用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加载器，它的工作方式是相同的（有条件的），但这会使在CSS中使用@media的目标失败。值得阅读enquire.js的用法说明，因为它可以做的比我在这里演示的多得多。

**警告：**上面没有使用jQuery，但是您可以利用它提供的一些函数;例如加载脚本-或执行其他您需要的功能。

赞(0）回复(0）举报 2023-01-12

mu0hgdu02#

为什么不只是有条件地加载脚本呢？

(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时执行代码？无论如何，有很多解决方案可以使用。

赞(0）回复(0）举报 2023-01-12

rkue9o1l3#

media不是<script>的有效属性，请在此处检查。
因此，您应该手动检测媒体类型，而不是动态加载脚本。
There is a plug-in for css media detection in javascript，您可以使用它。

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

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

赞(0）回复(0）举报 2023-01-12

uajslkp64#

如果你想让它也对以后的调整大小事件（例如桌面上的）做出React，你可以这样做：

<script>
  moby = window.matchMedia("(max-width: 500px)");
  moby.addListener(
    moby=>{
      if(moby.matches){
        document.head.innerHTML+="<script src='wonderfulScreenAffectedScript.js'></script>";
    }
   }
  );
</script>

赞(0）回复(0）举报 2023-01-12

我来回答

jquery 根据“media screen”值调用外部JS文件

4条答案

完整示例

相关问题

热门标签

最新问答