Question

是否可以（如果是这样的话）让媒体查询根据浏览器大小从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类。如果你们建议我使用其他程序，请告诉我。

提前致谢！

Answer 1

使用 matchmedia ，只有在满足某个媒体查询条件时才能执行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/

注意：对于较旧/不受支持的Web浏览器，您可以尝试使用matchMedia（）polyfill，尽管它不支持addListener。

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

1 个答案: