基于“媒体屏幕”调用外部JS文件值 [英] Call external JS file based on "media screen" value
问题描述
我正在尝试这样做，但它不起作用：
< html>
< head>
< script src =js / menu-collapser.jstype =text / javascriptmedia =media screen and（max-width：599px）>< / script>
< / head>
...
< / html>
// menu-collapser.js：
< pre $
jQuery（document）.ready（function（$）{
$（'。main-navigation li ul'）。hide（）;
$（'点击（功能（）{
$（this）.children（）。toggle（）;
}）;
} ）;
你有没有想法如何以正确的方式做到这一点？如果直接在标头中使用脚本，脚本就可以工作。
你不能直接使用Javascript < script> 标签。媒体查询用于链接的CSS文件或内联CSS样式。一个基本的例子：
< link rel =stylesheetmedia =screen and（min-width：900px）href = desktop.css/>
< link rel =stylesheetmedia =screen and（min-width：571px）href =tablet.css/>
< link rel =stylesheetmedia =screen and（max-width：570px）href =mobile.css/>
或直接在您的样式表中：
@media screen和（max-width：599px）{
#mobile {
display：block;
}
}
但是，您可以使用外部资产加载器/媒体查询库来执行此操作（ require.js ， modernizr.js ， enquire.js 等），In在这种情况下，我使用 enquire.js 设置示例，因为我认为它非常有效并且默认情况下不需要jQuery：
完整示例
1）包含enquire.js （此处）：
< script type =text / javascriptsrc =/ js / enquire.js>< / script> ;
2）创建一个加载函数 - 加载JS文件 p>
< script type =text / javascript>
//在头元素中加载JS文件
函数loadJS（url）
{
//将脚本标签添加到头部
var head = document.getElementsByTagName（'head'）[0];
var script = document.createElement（'script'）;
script.type ='text / javascript';
script.src = url;
//启动加载
head.appendChild（script）;
}
< / script>
3）Fire enquire.js并监听媒体查询更改（加载和调整大小）：
< script type =text / javascript>
enquire.register（screen and（max-width：599px），{
match：function（）{
//载入一个移动JS文件
loadJS（'mobile.js'）;
}
}）。listen（）;
$ b enquire.register（screen and（min-width：600px）and（max-width：899px），{
match：function（）{
//加载平板电脑JS文件
loadJS（'tablet.js'）;
//console.log('tablet loaded'）;
}
}）。listen （）;
$ b enquire.register（screen and（min-width：900px），{
match：function（）{
//加载桌面JS文件
loadJS（'desktop.js'）;
//console.log('desktop loaded'）;
}
}）。listen（）;
< / script>
在一起
使用一个简单的HTML页面，并从外部文件加载enquire.js：
< HTML>
< head>
< script type =text / javascriptsrc =/ enquire.js>< / script>
< script type =text / javascript>
//在头元素中加载JS文件
函数loadJS（url）
{
//将脚本标签添加到头部
var head = document.getElementsByTagName（'head'）[0];
var script = document.createElement（'script'）;
script.type ='text / javascript';
script.src = url;
//启动加载
head.appendChild（script）;
}
< / script>
< style>
body {
font-family：arial;
}
h1 {
font-size：50pt;
}
#mobile {
display：none;
}
#tablet {
display：none;
}
#desktop {
display：none;
}
@media screen和（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>桌面< / h1>
< / div>
< div id =tablet>
< h1>平板电脑< / h1>
< / div>
< div id =mobile>
< h1> Mobile< / h1>
< / div>
< script type =text / javascript>
enquire.register（screen and（max-width：599px），{
match：function（）{
//载入一个JS文件
loadJS （'mobile.js'）;
}
}）。listen（）;
$ b enquire.register（screen and（min-width：600px）and（max-width：899px），{
match：function（）{
loadJS（'tablet.js'）;
//console.log('tablet loaded'）;
}
}）。listen（）;
$ b 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，但您可以利用它提供的一些功能;例如加载脚本 - 或者执行你需要的其他功能。
I'm trying this but it is not working:
<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();
});
});
Do you have an idea on how to do this in the right way? The script work if used directly in the header with the tags.
You can't do that directly using Javascript <script> tags. Media queries are used in linked CSS files or inline CSS styles. A basic example:
<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"/>
Or directly in your stylesheets:
@media screen and (max-width: 599px) {
#mobile {
display: block;
}
}
However, you can use an external asset loader/media query library to do this (require.js, modernizr.js, enquire.js and others), In this case, I'm setting an example using enquire.js, as I think it's very effective and doesn't require jQuery by default:
Full example
1) Include enquire.js (available here):
<script type="text/javascript" src="/js/enquire.js"></script>
2) Create a load function - to load JS files:
<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 and listen for media query changes (both on-load and on-resize):
<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>
Putting it all together
Using a simple HTML page with enquire.js loaded from an external file:
<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>
In addition to loading JS files, you could create a CSS loader too, which would work in the same way (conditionally), but that defeats the object of using @media in CSS. It's worth reading the usage explanations for enquire.js, as it can do a lot more than I've illustrated here.
Caveat: Nothing above uses jQuery, but you could take advantage of some of the functions it offers; loading scripts for example - or executing other functions that you need to.
这篇关于基于“媒体屏幕”调用外部JS文件值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
