jquery – 根据“媒体屏幕”值调用外部JS文件

前端之家收集整理的这篇文章主要介绍了jquery – 根据“媒体屏幕”值调用外部JS文件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试这个,但它不起作用: @H_403_2@<html> <head> <script src="js/menu-collapser.js" type="text/javascript" media="media screen and (max-width: 599px)"></script> </head> ... </html>

//menu-collapser.js:

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

您是否知道如何以正确的方式做到这一点?如果标题中直接使用该脚本,则该脚本可以正常工作.

解决方法

你不能直接使用Javascript< script>标签.媒体查询用于链接的CSS文件或内联CSS样式.一个基本的例子: @H_403_2@<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"/>

或直接在您的样式表中:

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

但是,您可以使用外部资产加载器/媒体查询库来执行此操作(require.js,modernizr.js,enquire.js等),在这种情况下,我使用enquire.js设置示例,因为我认为它非常有效且不需要jQuery默认情况下:

完整的例子

1)包括enquire.js(可用here):

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

2)创建一个加载函数 – 加载JS文件

@H_403_2@<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)Fire enquire.js并监听媒体查询更改(包括加载和调整大小):

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

把它们放在一起

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

@H_403_2@<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,但你可以利用它提供的一些功能;例如加载脚本 – 或执行您需要的其他功能.

猜你在找的jQuery相关文章