JQuery Mobile 和 Firefox 一起玩不好？答案

【问题标题】：JQuery Mobile and Firefox don't play well together?JQuery Mobile 和 Firefox 一起玩不好？
【发布时间】：2013-09-18 00:08:09
【问题描述】：

在使用 jQuery Mobile 时遇到一些问题。想知道是否有其他人在使用 Firefox（桌面）并在其<head> 中包含 jQuery Mobile 脚本时遇到少量错误，如下所示：

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

在 Chrome 和 Firefox 中，我都会遇到大量 CSS 错误，我认为这些错误可以忽略不计。但是在 Firefox 中，除此之外我还遇到了几个 JS 错误，这似乎也破坏了我的页面（响应元素没有像我删除 jQuery Mobile 脚本时那样呈现）。

JS 错误：

Empty string passed to getElementById(). @ http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js:11100
Use of getPreventDefault() is deprecated.  Use defaultPrevented instead. @ http://code.jquery.com/jquery-1.9.1.js:3346

我知道这些错误看起来很冗长，但我不熟悉臃肿的 javascript 插件及其关于优雅降级的政策。其他人有这个问题吗？

更新

根据 Tim 的回答，我已经快照了这些 jQuery Mobile '警告'实际上影响页面的证据。以下是我注释掉 jQuery Mobile 脚本标签时的页面：

下面是保留 jQuery Mobile 脚本标签时页面的样子：

请注意，我想使用 jQuery Mobile 的原因纯粹是因为它的移动触摸/滑动事件。我没有兴趣采用它的哈希/ajax 链接功能。

【问题讨论】：

提供的行号是提示错误的行号。使用浏览器的“堆栈跟踪”功能查找您自己的代码导致这些问题的位置。
@Brian 我已经删除了我自己的所有 JavaScript 并且错误仍然存在，所以不是我的代码破坏了它...
do you run any firefox extensions that conflict with these two scripts?
@Brian 我不使用 Firefox（只是用它测试），所以据我所知，这是一个全新的安装。没有“扩展”，以及安装时存在的一些香草插件（请参阅已编辑的图像问题）。除了两个脚本和一个正文（如您的示例）之外，我也刚刚删除了所有内容，并且仍然抛出错误。

标签： javascript jquery html jquery-mobile

【解决方案1】：

Firefox 给你的是警告，而不是错误:)

看看jQuery Mobile source：

// find present pages
var path = $.mobile.path,
    $pages = $( ":jqmData(role='page'), :jqmData(role='dialog')" ),
    hash = path.stripHash( path.stripQueryParams(path.parseLocation().hash) ),
    hashPage = document.getElementById( hash );

使用 Chrome 开发工具在该行设置断点（Firefox 和 Firebug 似乎无法加载整个脚本），我们可以看到当 URL 中没有哈希时，path.parseLocation().hash 将一事无成，所以document.getElementById( hash )会抛出你在 Firefox 中看到的警告。

如果它困扰您，您可以在 Firefox 开发控制台中关闭警告，但如果您要使用 jQuery Mobile，恐怕警告将显示为没有哈希的 URL。不是 Firefox 试图告诉你某事是错误的，它只是 Firefox 告诉你某事可能是错误的，在这种情况下这是不正确的。

关于其他警告，this discussion 可能有用。似乎 jQuery 使用了已弃用的 getPreventDefault() 来与 Android 2.3 兼容。

【讨论】：

为我草率的语义道歉。它们确实是警告，但由于它们正在生成损坏的页面，因此它们不可忽略。请参阅更新的问题以获取可比较的图像。除非警告本身与错误页面无关，否则我需要在其他地方寻找答案。 jQuery Mobile 加载时是否会与 DOM/CSS 混淆？如果是，为什么以及如何？
我很肯定这些警告不会破坏您的页面，但是是的，jQM 在加载时确实会搞砸事情。也许this answer 和this discussion 可以帮助你。
当然，可以通过在 URL 的末尾附加一个哈希来轻松测试问题的这个特定部分。然后你可以看看这是否只是摆脱了这个“警告”，或者是你更大问题的原因。
@Strings 同意，如果不查看相关页面中的任何代码，也无法进一步解决问题。
恐怕我已经把答案告诉了马修。尽管这很有帮助，但 Mathew 的回答让我开始仔细研究 DOM。事实上，jQuery Mobile 已经将其中的一些内容注入到我的网页中（甚至没有调用脚本）。不过已经为你 +1 了。 :-)

【解决方案2】：

是的，jQuery Mobile 在加载时会“弄乱 DOM”。例如，jQuery Mobile 会将您的内容包装在“页面”div 中：

在幕后，框架将注入页面包装器，如果它是未包含在标记中，因为它是管理页面所必需的 (Pages - jQuery Mobile Docs)

但是您可以通过一次只包含一个 jQuery Mobile 位来查看是 CSS 还是 Javascript 破坏了您的网站。

我也收到关于调用getElementById() 的相同警告，我可以确认这只是一个警告，不会影响布局。 I have asked specifically about getting rid this warning，但无济于事。

最后，您是否尝试过使用jQuery Mobile's custom builder 来获取您感兴趣的部分（即触摸功能）？

【讨论】：

是的。 jQuery Mobile 用大量的类和一些 div 劫持了我的 DOM。与 Chrome 相比，Firefox 受包装元素的影响更大。他们似乎对盒子模型的解释不同，尤其是在高度方面。

【解决方案3】：

我的东西在使用 Firefox 时经常出现格式错误（还有许多其他小错误）如果只是为了测试，我建议谷歌 Chrome 或 Safari 以获得最佳性能...

【讨论】：

...我不会在我不打算投入生产的平台上进行测试...
哦，你的cmets我以为你不会使用firefox
我知道你是来回答的，不是来问的，但我的建议是认真对待 Firefox 作为一个广泛使用的供应商；即使它不是您最喜欢的浏览器。
我刚刚使用 chrome 测试了我的 jqm + phonegap android 应用程序，一切正常，但是 cordova 功能不起作用（显然）