jQuery/iframe 在 Chrome 中不起作用

Posted

技术标签:

【中文标题】jQuery/iframe 在 Chrome 中不起作用【英文标题】:jQuery/iframe not working in 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=enhttp://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 时会运行。 【参考方案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 会有所帮助,但前提是您的框架是本地页面。否则没关系 - 值得检查,以防万一。

以上是关于jQuery/iframe 在 Chrome 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

Chrome 意图在 Android Chrome 中不起作用

jquery,iframe,如何在父窗口监听,子窗口发生改变时,父窗口获取子窗口的值

Jquery getJSON 在 Chrome 中不起作用

为啥我的链接颜色关键帧动画在 Chrome 中不起作用?

为啥设置 document.cookie 在 Chrome 中不起作用?

Android 自动填充服务在 Chrome 中不起作用