如何使用媒体查询从HTML加载JavaScript文件

根据浏览器的大小,是否可以(如果可以,如何)使媒体查询从HTML加载不同的javascript文件？

与此类似的东西吗？

<script media="screen and (max-width: 900px)" src="/js/menu_home.js"  type="text/javascript"></script>

或类似我在互联网上找到的东西,但没有加载任何文件

<script>
function require(path) {
  try{
    document.write('<script type="text/javascript" src="'+path+'"><\/script>');
  } catch(e) {
    var script = document.createElement('script');
    script.src = path;
    document.getElementsByTagName('head')[0].appendChild(script);
  }
}
if (isMedia("screen and (max-width:900px)"){
  require('/js/menu_home.js');
}
else {
  require('/js/menu_photo.js');
}
</script>

在我的网站http://www.kujawadesigns.com/web/where_art_thou/上,我设置它来加载不同的脚本文件,以使手风琴菜单可以在正确的类别中展开.但是,我总是想从移动版本中删除expandfirst类.如果你们建议我使用其他过程,请告诉我.

提前致谢！

解决方法:

使用matchmedia,仅当满足特定mediaquery条件时,才可以执行JavaScript块

<script>
    if (window.matchMedia('screen and (min-width: 600px)')){
      var head = document.getElementsByTagName("head")[0];
      s = document.createElement('script');
      s.setAttribute('type','text/javascript');
      s.setAttribute('src',jsname);
      head.insertBefore(s, head.firstChild);


    }
</script>

参考：http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/

注意：
对于较旧/不受支持的网络浏览器,尽管不支持addListener,但您可以尝试使用matchMedia()polyfill.

标签：media-queries,javascript
来源： https://codeday.me/bug/20191031/1972690.html