JQuery没有在IE9中加载

Question

我的网站是http://www.thetruenorth.co.uk/

我无法让JQuery在我的IE9网站上工作.它在其他所有浏览器中都能正常运行

我已经意识到这是下面的代码,它检测它是否是一个小屏幕(移动),阻止它工作.如果我删除这一位,一切正常.我使用这个是因为我不知道我是如何禁用移动设备的JS,而是将它保留在桌面上.建议欢迎.

$(document).ready(function(){
if(matchMedia('only screen and (max-width: 1023px)').matches)
{}
else { 

CODE HERE

    }
});

我感觉有一个我不知道的bug或者什么.请有人能让我摆脱苦难吗？

谢谢

Answer 1

在IE9中进行简单调试

1. 打开IE9
2. 按F12打开"开发人员"窗口
3. 单击"脚本"选项卡
4. 单击右窗格中的"控制台"
5. 尝试加载您的页面

您将看到以下错误:

SCRIPT5009: 'matchMedia' is undefined 
scripts.js, line 2 character 2

IE9不支持'matchMedia'功能,因此不定义它.尝试在代码中引用它会在此时完全停止执行JavaScript,因为它不知道如何处理对未定义的内容的引用.

到底是怎么回事

jQuery正在加载到您的页面上.您可以通过在控制台输出下方的文本输入行中键入"$"来确认这一点,然后按Enter键.控制台将输出一些有关如何定义$的数据.这是jQuery加载的一个非常好的迹象.它并非在所有情况下都具有决定性,但对于这一点,我们已经确定了.

发生的事情是你的回调正在运行onDomReady(通过$(document).ready(...)),但它在第一行是错误的.此错误导致其余回调不执行.

验证功能支持

您可以使用caniuse.com查看哪些浏览器支持功能(JS,CSS等).在这种情况下:http://caniuse.com/matchmedia.您会注意到IE10是第一个支持matchMedia功能的版本.您可以假设在任何早期版本中,默认情况下您不会使用matchMedia,并且引用它会导致错误.

你现在能做什么

在caniuse.com网站上,顶部是一个名为"资源"的水平列表.在这个领域,您通常会找到修补不支持特定功能的浏览器的方法.

在matchMedia的情况下,有一个指向'polyfill'的链接,它将使用自定义js来模拟matchMedia的功能.网址是:https://github.com/paulirish/matchMedia.js/.

Polyfills有时会限制或使用它们,所以要小心.值得注意的是,matchMedia polyfill是由Paul Irish编写的,他是网络技术的公众人物.

关于条件IE包含的注释

IE支持条件注释,因此您可以仅为特定版本的IE包含上面定义的polyfill; 在你的情况下任何<IE10.这在MDN上有记录:http://msdn.microsoft.com/library/ms537512.aspx

<!--[if lte IE 10]]>
    <script src="polyfill.js"></script>
<![endif]-->

这样做是为了让我们尽可能使用浏览器的实现(通常更快,可能具有更多功能)和仅在需要时使用polyfill.