jQuery与浏览器兼容性问题

Question

天啊！我是一名开发者，已经工作多年了，一直试图强调代码与尽可能多的系统兼容。

最近，我购买了《jQuery in Action》这本书并开始阅读。让我非常不安的是，书中包含的源代码似乎在我当前电脑上的任何浏览器上都不能正确运行。

具体来说，我下载了书中的源代码并选择了第二章的“jQuery选择器实验室”。但它看起来和书中不一样。

在Google Chrome上，DOM示例和DOM示例代码窗格都完全为空。在IE7上，事情看起来更接近书中的内容。但DOM示例代码窗格中的源代码全部在一行上（向右延伸，超出页面）。请注意，书中的屏幕截图是在Mac上运行的浏览器上拍摄的。

我很好奇那些对jQuery更有经验的跨浏览器兼容性用户会发现什么，并且这个发现对于那些希望尽可能兼容的开发者并计划使用jQuery的人意味着什么。

- Jonathan Wood

---

使用jQuery的主要原因之一是它可以为您处理许多跨浏览器兼容性问题。在某些浏览器中失败的特定代码与jQuery框架无关，而更多地与该特定代码有关。 - DA.

@DA：是的，这就是为什么我对jQuery感兴趣的原因。然而，这些作者非常有资质。如果他们不能编写与jQuery兼容的代码，那我有什么机会呢？ - Jonathan Wood

jQuery处理（大多数）浏览器问题。因此，您的代码无法运行实际上与jQuery库本身无关。即使是微软现在也在asp.net中使用jQuery，所以不用担心。 - DA.

Answer 1

jQuery在以下所有浏览器中都得到积极支持：

• Firefox 2.0+
• Internet Explorer 6+
• Safari 3+
• Opera 10.6+
• Chrome 8+

以下是已知的旧版本浏览器存在的问题：

• Mozilla Firefox 1.0.x
• Internet Explorer 1.0-5.x
• Safari 1.0-2.0.1
• Opera 1.0-9.x
• Konqueror

jQuery通常可以在Konqueror和Firefox 1.0.x中正常工作，但由于我们不定期测试它们，可能会出现一些意外的错误。

如果您使用的是任何旧版本浏览器，则可能会遇到问题。否则，您应该在stackoverflow上发布您的代码以获取帮助。问题可能不是由浏览器引起的，而是由代码编写或执行方式引起的。

- Hussein

---

得到支持（甚至积极支持）并不意味着能产生一致的结果。我之所以认为高度兼容性很重要，是因为我不能决定我的用户将使用哪个浏览器。请注意，在Chrome（问题最多的浏览器）的情况下，我正在运行最新版本。 - Jonathan Wood

没有提供例子，很难判断你遇到了什么问题。 - Hussein

我不确定你的想法是什么。我发布了一个链接，指向我正在查看的代码。 - Jonathan Wood

我下载了压缩文件并查看了你提到的示例。代码正在使用get()。如果您使用的是Chrome，则这与指向本地文件的权限问题有关。这在stackoverflow上已经讨论过很多次了。您可以通过将文件上传到实时生产服务器来解决此问题，或尝试在Firefox上运行它。请查看以下链接，了解如何解决从localhost工作时Chrome的权限问题。http://robspangler.com/blog/jquery-load-doesnt-work-in-chrome/ - Hussein

Answer 2

我认为你的问题的一部分是你正在访问一些应该从Web服务器加载的文件系统内容。例如，我在你的第二章示例中在Chrome中看到了这个错误：

XMLHttpRequest cannot load file://...chapter2/dom.sample.html.
Origin null is not allowed by Access-Control-Allow-Origin.

除了那种问题，Chrome的表现似乎还算不错。

我通常会针对IE[789]、Chrome、Firefox、Safari和Opera进行开发，并没有看到很多与jQuery或jQuery-UI特定相关的浏览器问题。问题主要是CSS问题和某些JavaScript问题（在IE中都有），而这些问题并不是jQuery的问题。

- mu is too short

---

好吧，这不是我的例子。不幸的是，我对此了解不够，无法看出您发布的错误为什么会特定于本地加载的网站。 - Jonathan Wood

Jonathan...你是从本地Web服务器加载页面还是本地文件系统？这两者之间有很大的区别。 - DA.

@DA：我非常确定他是从本地文件系统加载它们，因此导致在Chrome浏览器中AJAX不起作用，并且看到了一般混乱的结果。 - mu is too short

@DA：是的，我正在本地加载它们。 - Jonathan Wood

本地...是指文件系统还是服务器？如果你只是从文件系统中加载它们，那么就像之前所说的那样，这很可能是问题所在。 - DA.

Answer 3

jQuery的第3版适用于以下桌面浏览器：

• Chrome：（当前版本-1）和当前版本
• Edge：（当前版本-1）和当前版本
• Firefox：（当前版本-1）和当前版本
• Internet Explorer：9+
• Safari：（当前版本-1）和当前版本
• Opera：当前版本

它还适用于以下移动浏览器：

• Android 4.0+上的原生浏览器
• iOS 7+上的Safari浏览器

来源：https://jquery.com/browser-support/

- John Slegers

Answer 4

在这本书的情况下，我更关心jQuery代码的质量，而不是它的跨浏览器兼容性。我个人没有看过这本书，所以无法做出个人判断；然而，我是一款网页应用程序的首席开发人员，目前有大约15,000个用户，我们已经自信地使用jQuery几年了，没有遇到任何问题。我们必须支持使用市场上所有主要浏览器的各种平台的客户端。当jQuery代码编写正确并针对所有环境进行测试时，它可以绝对正常工作，无论您使用哪个浏览器。

- wwd

---

好吧，我猜这很令人鼓舞。然而，书的作者似乎很有资格。其中一个直接参与了jQuery及其相关插件的开发。前言是由jQuery的创始人John Resig撰写的热情洋溢的评论。如果他们都不能做到正确，那么一个新手如何能够掌握jQuery呢？ - Jonathan Wood

Answer 5

我不知道为什么，但如果我将整个示例目录复制到tomcat / webapps中，它就可以正常工作。但是，如果我直接从浏览器打开页面（lab.selectors.html），它不会显示dom样本部分。来自firefox控制台的错误消息如下：

[16:56:36.335] junk after document element @ file:///C:/JavaScript/jqia2/chapter2/dom.sample.html:2

- joohwan

Answer 6

代码示例似乎使用过时的jQuery v1.4。下载最新版本并查看已知问题以获取有关跨浏览器兼容性的更多详细信息。

- Daniel Protopopov