Backbone.js 仅在 IE7 中导致错误

Posted 2023-04-13

【中文标题】Backbone.js 仅在 IE7 中导致错误

【英文标题】：Backbone.js cause bug only in IE7

【发布时间】：2011-06-25 19:51:21

【问题描述】：

我正在使用后端的 CodeIgniter 和前端的 Backbone.js 开发一个 Web 应用程序。 我也使用 html5 Boilerplate 作为我的开始模板。

我使用 Backbone 的 Controller 和 History 作为应用程序的主要导航。我过去做过一次，一切正常。问题是，当我使用 Backbone.History.start() 开始 hashchange 事件捕获并单击链接 example.com/#home 时，url 中的哈希更改，事件被触发但 2 秒后，哈希被清除从 url 和 javascript 错误仅在 ie7 中引发。

我查看了源代码，并且在 IE7 中通过创建一个 IFRAME 运行一个间隔来检查哈希值更改来实现 hashchange 事件。

以前有人遇到过这个奇怪的错误并知道如何解决吗？

【参考方案1】：

使用 Backbone 处理 #hash 基础应用程序的正确方法似乎是 Backbone.history.saveLocation(hash) 和 Backbone.history.loadUrl() 之后以启用控制器的路由。

希望我以前知道这... 玩得开心这个很棒的 MVC 库:)

【讨论】：

Backbone.history.start() 工作正常，但 IE7 除外。似乎 IE7 没有触发 hashchange 事件。就我而言，我使用Modernizr.hashchange 首先检查它是否受支持。如果没有，我将使用.saveLocation() 和.loadUrl()。

【参考方案2】：

我发现可行的解决方案是使用 Ben Alman 的 hashchange plugin。进入Backbone.History中的start函数，将start函数的代码替换为this。

开始：函数（） $(window).hashchange(this.checkUrl); 返回 this.loadUrl();

并确保在您的代码中包含 hashchange 插件文件。

【参考方案3】：

单击哈希 URL 实际上不会在 IE 中保存历史条目——使用 Backbone 的 saveLocation 函数删除您希望能够返回的位置的标记。有关完整的独家新闻，请参阅：

http://documentcloud.github.com/backbone/#Controller-saveLocation

【讨论】：

不幸的是，Backbone 的 saveLocation 不会触发 hashchange 事件，我的整个应用程序都需要这个功能。我在 IE 调试控制台 SCRIPT1014: Invalid character javascript:0,line 1 character 2; 中遇到此错误，这似乎与 IE 不可见 IFRAME 有关。任何想法如何解决它？

我已经测试了另一个利用 Backbone 历史的 Backbone.js 教程，同样的问题在 IE7 中出现。这是 Elf Sternberg link 制作的演示 URL。如您所见，当您单击一个项目时，哈希更改为 #item/c1 并在 50 毫秒后更改回 #（这是检查哈希更改的间隔帧）。也许我们都使用了错误的 Backbone 的历史？能否提供一些真实的案例用法？

问题是ie7中的行为与其他浏览器完全不同。哈希标签不会在页面加载时加载，哈希标签不会像其他浏览器一样在更改后自动保存在历史记录中。我想这需要在未来解决，以便所有浏览器的行为都相同。

【参考方案4】：

我在官方问题列表中从 Jon Leighton 那里找到了解决此问题的方法：https://github.com/documentcloud/backbone/issues/228

直到官方补丁将其添加到主干.js（主干 0.3.3 中的第 689 行）

this.iframe.document.open().close(); this.iframe.location.hash = window.location.hash;

在以下行之后：

this.iframe = $('iframe src="javascript:0" tabindex="-1" ').hide().appendTo('body')[0].contentWindow;

（我无法编写完整的 i-frame 标签 - 这里不允许 :)）