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

根据浏览器大小，是否有可能（以及如何）让媒体查询从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类。如果你们推荐我使用其他程序，请告诉我。

在此先感谢！

来源

2013-04-05 Justin Sven Kujawa

使用matchmedia可以执行，只有当某个mediaquery条件满足

<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>

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

注：对于较旧的/不支持Web浏览器，你可以试试matchMedia（）填充，尽管它不支持addListener。

来源

2013-04-05 02:38:28

感谢您的及时回应。它似乎应该工作。但标签正在关闭。我试着做这样的事情，但它仍然无法正常工作。如果（window.matchMedia（'screen and（min-width：900px）'））{' ' 抱歉，我是JavaScript新手，不太了解它。 – 2013-04-05 03:26:07

对于评论中的语法感到抱歉。我不知道如何将该部分更改为代码视图。它应该只是'代码'吧？奇怪的是，它不适用于其他评论。 – 2013-04-05 03:33:07

附加脚本头使用JavaScript，我错误地键入document.write – 2013-04-05 05:27:55

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

回答

相关问题