Question

我使用jquery.flexslider插件，效果很好。

但对于屏幕＆lt; 600px我不想加载插件。我尝试了几个脚本并以下面的结尾，我认为最好。

我将它插入标题中的CSS和JS标记之后，但遗憾的是它仅适用于第二次加载，而不是第一次使用F5（在IE 11和Chrome 45.0.2454.101中测试）。

function addScript (src) {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = 'www.mywebadre.ss/js/jquery.flexslider-min.js'; 
  document.head.appendChild(script);
} 

if (screen.width > 600) {
  addScript("www.mywebadre.ss/js/jquery.flexslider-min.js");
}

请参阅http://tinyurl.com/qjkeesg

Answer 1

由于跨浏览器的差异，您不能总是依赖已存在的document.head。请使用document.getElementsById来获取对元素的引用。

function addScript(src) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = src;
    document.getElementsByTagName("head")[0].appendChild(script);
}
if (screen.width > 600) {
    addScript('http://www.mywebadre.ss/js/jquery.flexslider-min.js');
}

另外，我注意到您没有在网址的前面使用http或https。

经过测试后，只要我使用有效的网址，它就可以在IE和Chrome中使用。最后一步，请将您的网址粘贴到浏览器中，确保您的网址有效。

Answer 2

感谢您的帮助，最后我自己找到了解决方案：

在连接中使用Screen.width

添加外部脚本不需要单独的脚本

只需打开jquery.flexslider-min.js并添加到原始脚本的开头，如下所示：

var mq = window.matchMedia( "(min-width: 500px)" );
if (mq.matches) {   here is the original code, just let it how it is }

不要忘记原始脚本末尾的} 再次关闭。希望我能用这个简单的伎俩帮助别人

第一次加载网站时，addScript功能不起作用

2 个答案: