大佬教程收集整理的这篇文章主要介绍了jquery – 根据“媒体屏幕”值调用外部JS文件，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<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(); }); });
您是否知道如何以正确的方式做到这一点？如果标题中直接使用该脚本,则该脚本可以正常工作.
<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默认情况下：
完整的例子
<script type="text/javascript" src="/js/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>
3)Fire 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>
把它们放在一起
使用从外部文件加载的enquire.js的简单HTML页面：
<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 – 根据“媒体屏幕”值调用外部JS文件全部内容，希望文章能够帮你解决jquery – 根据“媒体屏幕”值调用外部JS文件所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。