jQuery/iframe 在 Chrome 中不起作用答案

【问题标题】：jQuery/iframe not working in ChromejQuery/iframe 在 Chrome 中不起作用
【发布时间】：2011-03-07 10:41:57
【问题描述】：

我在这里创建了一个 facebook 粉丝页面：

http://www.facebook.com/apps/application.php?id=120196931351044&v=app_120196931351044

它包含 iframe 来调用使用 jquery 的某些页面/图像库。除 Chrome 外，所有浏览器都可以正常工作。 iframe 中没有任何内容显示在 Chrome 中，只有空白背景。

我尝试使用 load 事件而不是 ready 处理程序，但仍然没有运气。
有没有人在 chrome 中目睹过类似的问题？

我们将不胜感激。

header 中的大图来自 iframe，一个包含 jquery 的页面。

更新：

如下面的 cmets 所示，它似乎在 Safari 中也不起作用。

更新 2

在 iframe 之外运行时，相同的代码似乎可以在 chrome 中运行，这是链接到工作页面：

http://jsbin.com/esame4/4

更新 3：

似乎在使用 iframe 时这个问题在 chrome 中仍然存在，如下所示：

http://www.google.am/support/forum/p/Chrome/thread?tid=2c81c3e3fd99b388&hl=en
http://forums.sharethis.com/topic.php?id=2742

【问题讨论】：

Safari 似乎也是如此
@yaya3：是的，没错，在我的情况下，safari 的行为也是如此。
它在 Safari 5.0 中也不起作用
我看到这发生在document.ready 之外，试着把它移到里面？ var $curbox = ('#content_navigator .box:first');
@Nick Craver：我认为这不是问题，因为相同的代码在直接运行到 chrome 而不是 iframe 时会运行。

标签： jquery facebook google-chrome facebook-page

【解决方案1】：

解决方案其实很简单。当您看到 Facebook 页面/应用程序时，要让您的 iframe 内容在 Chrome 中正常显示，您必须从安全服务器调用内容或属性。

您必须确保所有必需的文件和文件夹（如 CSS、JS 和图像文件）都位于安全文件夹中。

为此，您需要为您的域提供 SSL 证书。
更改您的 htaccess 文件和 mod 重写条件以强制所有或特定文件夹使用 SSL，尤其是当您使用变量调用文件时。如果您使用的是绝对 URL，请将其更改为 https。

希望这会有所帮助！

【讨论】：

【解决方案2】：

一些建议，主要与您在 gallery.php 页面上的 Javascript 设置有关：

我的第一反应是说这是 Chrome/WebKit 处理跨站点脚本和其他类似潜在安全漏洞的方式中的错误（甚至是预期的响应）。我知道一些安全漏洞涉及从 iframe 内部运行脚本（如 this former Chrome bug 所指）。

也许这与您从 ajax.googleapis.com 引用您的 jquery.min.js 而不是将其托管在与您的 gallery.php 页面相同的域中有关。尝试将 jquery.min.js 的副本放在您的服务器上并链接到它，看看是否有帮助。

另外，尝试将您的 jQuery 库 <link> 标签移动到您的 <head> 标签内，因为这是一个更合适的位置。

您也可以尝试使用jQuery Innerfade library 来运行您的旋转横幅。它会清理您的脚本，并且可能会让浏览器相信您并没有试图利用安全漏洞。

如果您无法切换到使用 Innerfade，至少将您的 JavaScript 变量更改为不使用 $ 命名（例如，将“$curbox”变量更改为“curbox”）。它可能会进一步清除浏览器与您的 Javascript 可能存在的任何混淆。至少，这是一种很好的做法，尤其是在使用 jQuery 时。

【讨论】：

你确定？看起来您仍然在变量名中使用 $ 。我怀疑它会有所作为，但无论如何这是一个很好的做法。 codelifter.com/main/tips/tip_020.shtml
是的，我什至尝试用 jQuery 替换 $ 但这也不是问题。
我的意思是你的实际变量名。从技术上讲，除了变量名中的下划线之外，您不应该有任何特殊字符，但是当变量名中不允许使用美元符号时，您可以使用名为“$curbox”和“$prevbox”的变量。据我所知，PHP 是唯一需要甚至允许这样做的网络语言。就像我说的，我怀疑这会解决问题，但无论如何你都应该清理它。
“变量名中不允许使用美元符号”。根据 JavaScript: The Definitive Guide (5th Edition)，“在 JavaScript 1.1 之前，美元符号在标识符中是不合法的”。 According to Wikipedia，JavaScript 1.2 由 Netscape 4.0 实现，Chrome 从版本 1 开始支持 JavaScript 1.5。我认为我们现在可以在变量名的开头使用美元符号。
我的错；我完全忽略了 $ 本身就是一个变量名这一事实。那是我的愚蠢。

【解决方案3】：

如果由于页面已经加载而导致 document.ready 没有在 iframe 中被调用是一个问题，是否可以将要加载的 javascript 放在新页面的底部而不是在 document.ready 中，以便在加载其他所有内容后加载？我在某些页面上做了类似的事情，比如在页面顶部放一些 javascript 来显示加载图像，在底部放另一个块来隐藏它等等......

<html>
    <head><script>function pop(){alert("Page Loaded");}</script></head>
    <body>Lorum ipsum...</body>
    <script>pop();</script>
</html>

【讨论】：

【解决方案4】：

嘿，sAc，我已经在 Chrome 5.0.375.86 上进行了尝试，并且成功了。由于 safari 和 chrome 使用相同的 Web 引擎 (webkit)，它可能会继承相同的问题。由于这是一个javascript问题，现在chrome使用google V8 javascript引擎而不是JavaScriptCore（来自webkit的默认javascript引擎），这个问题似乎在Chrome的最新版本中得到了解决。也许这可能是 JavaScriptCore 上的一个问题，因为在构建 iframe 之前，DOM 已经加载到文档上，所以不调度 ready 或 load 事件。临时解决方案可以设置一个标志来检查内容是否已初始化。使用 setTimeOut 放置一个 5 到 10 秒的计时器来检查这个标志。如果未初始化，则在 setTimeOut 回调中调用它。因此，如果 safari 不调用 load 或 ready 事件，setTimeOut 可以为您完成。当然，不要把它放在你的 jquery 层中。将其作为纯 javascript 标记放入 HTML 中以由 iFrame 加载。

【讨论】：

【解决方案5】：

无法正常工作的原因是浏览器将 iframe 标记为不安全。要解决此问题，只需在要显示的页面头部添加一个字符集：

< head ><br/>
< meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"/><br/>
< /head><br/>

【讨论】：

【解决方案6】：

检查您尝试放入iframe 的页面中的响应标头。您正在寻找一个名为 x-frame-options 的标头。

这是一个新的安全选项，告诉浏览器不要加载框架内容。很多网络服务器都会默认添加它。

这是值得检查的。

【讨论】：

尝试使用header("x-frame-Options: SAMEORIGIN"); 设置这些标题，但问题仍然存在。
@sAc - 那么是否已经设置了 x-frame-options ？如果是这样，将其更改为 SAMEORIGIN 会有所帮助，但前提是您的框架是本地页面。否则没关系 - 值得检查，以防万一。