12

少し奇妙で、私は少し困惑しています...

私はページを持っています。そのページには次のものがあります（まあ、いくつかの名前が変更されています）：

$(document).ready(function() {
  var router = new App.Routers.ExampleRouter();
  Backbone.history.start({pushState: true});
})

ルーターは、いくつかのコレクション、ビューなどをインスタンス化するために進みます。Chrome、Safari、Firefox、および Opera では、すべてが完全に正常に機能しています。しかし、IE 8 または 9 にはありません (おそらく 10 も、テストしていません)。

IE8 または 9 では、ページが最初に要求されたときにロードが開始されますが、ドキュメントの準備が整うと (したがってルーターがインスタンス化され、履歴が開始されると)、ページはサイトのルートにリダイレクトされます。

リダイレクトの前にコンソールに何も表示されません。どういうわけかそれを実行できるコードは他にありません。つまり、私たちは大きなコードベースを持っているので、常に可能性がありますが、競合する可能性のあるルーティングや History API を扱うものは何もありません.

奇妙な部分は、pushState: trueオプションが削除された場合、ページがリダイレクトされず、必要に応じて完全に読み込まれることです-ルーターはハッシュバンスタイルのルートを期待しているため、何もしませんが、少なくともそうではありません'サイトのルートに戻りません。オプションを再度追加すると、再び壊れます...

したがって、私の最初の考えは明らかに「まあ... History API は IE8 または 9 ではサポートされていない... に違いない」というものでしたが、Backbone.js はこれらの古いブラウザのハッシュバン スタイルの URL に戻すことになっているので、それはあり得ません。

Backbone.js ルーターを処理しているときに、IE だけがホームページにリダイレクトされる原因は何ですか?

編集

（EDIT 2が何もしなかったことを証明しているため、以下はおそらく無視できますが、末尾のコンマを削除することはできます）

さて、少しデバッグして本当にストローを握りしめた後、ルーターが実際にはインスタンス化されていないことがわかりました-初期化メソッドが呼び出されておらず、ルーターでカスタムメソッドを呼び出す機能がありません(私は愚かなメソッドを作っalertてconsole.log) の直後に呼び出しvar router = new App.Routers.ExampleRouter();ます。

メソッドを呼び出すと、「オブジェクトはそのプロパティまたはメソッドをサポートしていません」という行に沿ってエラーが返されました (これはすべて IE であり、他のブラウザーでは問題ありません)。これはルーターに固有のものではありませんでしたが、私も新しいモデルを呼び出して、同じことをしました。オブジェクト エラーの Google は、末尾のカンマを提案しました。コードベースにいくつかありましたが、それらをすべて削除したところ、うまくいっているように見えました。突然、ルーター (およびモデル) が非常に多く存在しました - 初期化メソッドが呼び出され、カスタム メソッドが呼び出されました。カンマが解析中のすべての JS を停止した可能性があると考えました (複数のファイルを連結します)。

私は明らかに、pushStateオプションを削除してこれらすべてを行っていました。pushState: true次に、上記のことが起こった場合にそれを修正することを真剣に考えて追加しました. 当時私は「ああ、ルーターは実際には存在しなかったのでBackbone.History.Start({pushState: true})、呼び出されてルートを探して送信されたのかもしれませんが、ルーターがインスタンス化されていないために存在せず、ホームページへのキックバックはほんの少しでした」と考えていました一種の副作用」ですが、残念ながら、まったく同じことがまだ起こっています. オプションを追加するpushState: trueと、ページが読み込まれず、ホームページに戻ります。

編集2

わかりましたので、さらにいくつかのことを試しましたが、役に立ちませんでした。CDN 経由で jQuery、Backbone.js、および Underscore.js を取り込み、ルーターを作成してインスタンス化し、Backbone.History.Start() を呼び出すための最低限の JavaScript を含む、完全に別の空白のページを作成しました。そのページのコード全体は次のとおりです。

<!DOCTYPE html>
<html>
  <head>
    <title>Test IE</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery-1.8.0.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
    <script>
      $(document).ready(function(){

        App = {
          Routers: {

          }
        };

        App.Routers.RouterTest = Backbone.Router.extend({
          routes: {
            "ietest.html" : "helloWorld"
          },

          initialize: function() {
            console.log("router init");
          },

          helloWorld: function() {
            alert("helloWorld!")
          }
        });
        router = new App.Routers.RouterTest();
        Backbone.history.start({pushState: true});
      });
    </script>

  </head>
  <body>

  </body>
</html>

それだけです。完全にベアボーンであり、他のサイト アセットなどからの影響はありません。まったく同じことが引き続き発生します。IE (8 と 9 でテスト済み) を除いて、すべてのブラウザーは期待どおりの動作をします。IE は再びページの読み込みを開始し、ルートを実行し、突然ホームページにリダイレクトされます。pushState をオフにして hashbangs を使用すると、すべてが期待どおりに機能するため、pushState を true に設定していないだけで、IE でルーティングが「機能」します。

できる限りすべてを取り除いたので、これがフロントエンドのものであることがわかりませんか？これがサーバー関連のものである方法はありますか？バックエンドは Ruby on Rails で、問題はローカルおよびステージング/ライブ サーバーで発生します。それとも、Backbone.js が pushState を IE で hashbang に分解する方法をひどく誤解していますか?

編集3

問題の動画をアップしました

4

7 に答える 7

10

Internet Explorer は、IE 10 まで pushState をサポートしていません。

http://caniuse.com/#search=pushState

編集：

オプションの pushState で History を開始するには、次のようにします。

Backbone.history.start({pushState: "pushState" in window.history});
于 2012-08-23T11:28:38.367 に答える
9

アプリケーションがルート URL ( /) から提供されていないようです。

あなたは をリクエストしhttp://example.com/sub/ietest.htmlており、Backbone は にリダイレクトしhttp://example.com/#sub/ietest.htmlます。

おそらくBackbone.history、ルート URL を指定して初期化する必要があります。

Backbone.history.start({pushState: true, root: '/sub/'});

私はあなたのページのソースコードを実際に掘り下げていません（そしてJSは縮小されています）が、これは事実のようです. たぶんroot: '/bible/'？

于 2012-08-23T10:08:28.820 に答える
4

すべての console.log() 呼び出しにコメントを付けてみてください。私の場合、それは ie9 の問題でした。はい、私はまた、その理由について質問しています:-)、非常に奇妙です

(私は pushState を使用しませんでしたが、それは問題ではないと思います)

于 2012-11-27T23:10:09.417 に答える
1

これは、ハッシュを正しく使用するために IE8/9 (作業中は 7 をサポートしていません) を取得するという点で、私にとってはうまくいくようです:

var pushState = !!(window.history && window.history.pushState),
    settings = { pushState: pushState, silent: true, hashChange: !pushState ? true : false };
Backbone.history.start(settings);

仕事で使用しているサービスに問題があり、何らかの理由で結果を返さないため、設定オブジェクトを個別に保持しました。その結果の問題がこの変更の追加によるものかどうかは、まだ議論の余地があります. それも私のユースケースに限定されています。

また、IE の場合は、ディープリンク用のハッシュを処理する必要があることに注意してください。

私は"silent": trueb/c を使用して、ページの読み込み時に最初の結果をレンダリングしています。これにより、呼び出しが発生しなくなります。バックボーンのドキュメントから:

サーバーがすでにページ全体をレンダリングしており、履歴の開始時に初期ルートをトリガーしたくない場合は、silent: true を渡します。
于 2012-12-03T18:51:28.640 に答える
0

これをチェックしてください：

if(!(window.history && history.pushState)) {
        Backbone.history.start({ pushState: false, silent: true });
        var fragment = window.location.pathname.substr(
            Backbone.history.options.root.length);
        Backbone.history.navigate(fragment, { trigger: true });
    }
    else {
        Backbone.history.start({ pushState: true });
    }

クレジットはhttp://blog.isotoma.com/2014/01/backbone-history-and-ie9/に移動します

于 2014-06-04T13:59:17.627 に答える
0

これは私にとってはうまくいきました: Backbone.history.start({root: '/my_app_dir_here/'});

于 2014-12-02T16:34:17.803 に答える
0

質問が最初に投稿されたときにこのオプションが利用可能だったかどうかはわかりません...

http://backbonejs.org/#History-startで詳しく説明されているように、start を呼び出すときに {hashChange: false} のオプションを追加することで、ブラウザー < IE 10 (pushState のサポートなし) でこの問題を回避しました。

于 2014-05-22T11:00:06.640 に答える