在backbone.js Facebook应用程序中添加历史状态(在iframe中)

时间:2011-07-26 20:31:52

标签: javascript facebook html5 iframe backbone.js

我正在开发一个使用backbone.js 0.3.3的Facebook应用,并试图让后退按钮为用户正常工作。

Backbone通过URL哈希保存状态,URL哈希用于执行内部路由。例如,#home将加载主页,#session是另一个页面。当这种情况发生在iframe之外时,会保存历史记录,因此您可以使用后退按钮正确导航。

iframe内的导航不是问题,所有链接都有效,但浏览器没有保存历史记录。

问题:

Facebook iframe指向http://app.example.com,这是Backbone应用程序。 如何在Facebook应用程序上为用户提供后退按钮?使用Backbone的现有解决方案的加分点。


我从几个角度研究过这个问题,无法在任何地方找到满意的解决方案。似乎很少有Facebook应用程序使用骨干/非常依赖Javascript。

我认为解决方案是将历史状态添加到iframe的父窗口,但我不知道该怎么做。 HTML5历史?某种Facebook API?即使是部分解决方案(对于现代浏览器)也比当前情况更好。

1 个答案:

答案 0 :(得分:3)

我认为您的Facebook应用程序位于沙盒中,他们称之为Canvas。因为它是沙箱,所以它不是带有您网站源代码的直接iframe。事实是,Facebook从您的网站上读取源代码,将其放入沙箱并在iframe中渲染沙箱。

我不确定这是否仍然存在。在旧的Facebook应用程序中,在此沙箱中,许多JavaScript API被劫持。例如,document.getElementById不是原始document.getElementById。它是其他东西,它只能检索沙箱中的元素。他们确保您使用的几乎所有JavaScript API都会按预期运行,但无法访问沙箱之外的任何位置。

一个问题是他们没有模仿原始的window.location行为。我认为那是因为他们希望它超出你的范围。您的应用程序位于画布(沙箱)中,沙箱位于iframe中。所以iframe应该是你无法企及的。

到目前为止,我还不知道在Facebook Canvas中实现历史API支持。因为整个页面被Facebook劫持而你无法在Facebook的域中放置任何内容,所以你的页面实际上是在你无法控制的域中。在这种情况下,到目前为止我无法想到可能的解决方案。