jQuery 不适用于带有 Chrome 的 facebook 应用程序答案

【问题标题】：jQuery does not work in facebook app with ChromejQuery 不适用于带有 Chrome 的 facebook 应用程序
【发布时间】：2012-06-13 13:56:51
【问题描述】：

我有一个使用 jQuery 的代码，它检查是否点击了正确的图像，然后根据答案是否正确将图像更改为红色或绿色。之后，它会等待 2 秒并重新加载页面以显示下一个图片对。单独使用它工作得很好，但是一旦我把它放在 facebook 应用程序中，它就不能正常工作了。

在 IE 和 Firefox 中，它会在单击时更改颜色，但不会重新加载页面。然而，在 chrome 中，它甚至不会改变点击时的颜色。可能是 iframe 的问题还是什么？在 iframe 中使用 jQuery 时需要特定参数吗？

我的代码摘录如下：

jQuery(document).ready(function(){
   jQuery('img#0').live("click", function(){
        if (jQuery(this).hasClass("correct")){
            jQuery(this).attr('src', "0g.png");
        } else{
            jQuery(this).attr('src', "0r.png");
        }

    });
});

如您所见，我什至将 $ 更改为 jQuery 以防止与其他可能的库发生冲突。

有什么想法可以让它发挥作用吗？

【问题讨论】：

浏览器的错误控制台显示什么？
控制台没有显示任何错误
其实Chrome控制台显示：Uncaught ReferenceError: jQuery is not defined。我需要找出如何定义它，因为我已经成功地将<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 包含在我的代码中。
@LukasBijaminas 这就是定义 jQuery 所需的全部内容。这可能是通过 https 传输的内容的问题，但 jQuery 请求是通过 http 传递的。在这种情况下，您可以使用protocol-relative URL，例如<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>。 Paul 的文章还提供了从服务器加载 jQuery 的备用方法。

标签： jquery facebook google-chrome facebook-apps

【解决方案1】：

当您在 facebook 页面或应用程序中运行 jquery 时，您必须使用 https，包括 html 中指向脚本文件的链接。

【讨论】：

IE 也有同样的问题。想知道如果没有这些修复，Mozilla 是如何工作的。Nyways 你的回答很有帮助。谢谢

【解决方案2】：

ID 为 0 的图像在 HTML4 和 XHTML 中是无效的 HTML 元素 ID。它在 HTML5 中有效。这可能是您的 DOCTYPE 声明的问题。

如果更改 DOCTYPE 不能解决问题，您可以委托给图片点击事件。

// html
<div id="someElement">
   <img class="correct" />
</div>

// jquery
$("div#someElement").delegate("img", "click", function() {
   var correct = $(this).hasClass("correct");
   $(this).attr('src', (correct ? "0g.png" : "0r.png" ) );
});

jQuery.delegate() 类似于.live() 函数，因为它将应用于当前和未来的元素。不同之处在于 delegate() 将事件处理程序应用于父元素 (someElement) 并监视来自子元素的冒泡事件。 live() 在文档顶部监视这些冒泡事件，并且可能会影响性能。文档页面上有更多信息，这里有很多关于 SO 关于两者之间差异的讨论。

以下是 ID 属性规范的相关链接：

html5 spec
html4 spec
xhtml guidelines
What are valid values for the id attribute in HTML?

【讨论】：

我这样做了，但没有帮助。我将 id 更改为“i0”，因此它不会与 DOCTYPE 声明冲突。我也将更改应用到代码，但它仍然没有工作。我使用.live() 的一个原因是因为后来我使用.die() 来终止事件处理程序，因此用户将无法单击另一张图片。

【解决方案3】：

好的，这可能是有史以来最愚蠢的想法 - 但它对我有用。浏览网页时，JQuery 在 chrome 中的网页上加载良好 - 而不是在 Facebook 中。当我在 fb 应用程序的 chrome 中加载它时，它失败了。

IE 运行良好。我发现我链接到 http:// 而不是 https:// （记住一切都必须是安全的）。当我将其更改为 https:// 时，它工作正常。

【讨论】：