複数ページ間のイベントの発火と監視について

実現したいこと

JavaScriptのフレームワークにBackbone.jsを使ってページ間でのイベントの発火と監視を行う方法を知りたいです。もしくは可能ですか？

イメージとしては、page2.htmlに配置されたボタンを押すとpage1.htmlのdiv要素を書き換えるようなイメージです。これをブラウザを2つ立ち上げ、それぞれpage1.htmlとpage2.htmlを表示させた状態で実施したいです。

page2.html(myView2)のbuttonをクリックするとイベントがtriggerし、page1.html(myView1)のListenToでイベントをキャッチして表示を切り替えるという流れです。
common.jsにはmyView1/2で共有できるイベントのオブジェクトを各Viewの生成時に引数として与えています。

実現できていること

同一ページでは解説サイトがあり、動作させることが出来ました。
page2.html(myView2)でトリガーしたイベントは、自身のpage2.htmlのlistenToで捕捉できているため、コンソールが表示されています。※これは当たり前ですね

common.js

// 監視用イベントの作成
var mediator = _.extend({}, Backbone.Events);

var myView1 = Backbone.View.extend({
  option: {},
  initialize: function(attr, option) {
    this.option = option;
    this.listenTo(option.mediator, 'OccurEvent', this.display);

  },
  display: function() {
    console.log("OccurEvent");
    this.$el.html("<p>Event Occurred</p>");
  }
});

var myView2 = Backbone.View.extend({
  option: {},
  initialize: function(attr, option) {
    this.option = option;
    this.listenTo(option.mediator, 'OccurEvent', this.display);
  },
  display: function() {
    console.log("Event occurred");
  },
  events: {
    "click >": "occurEvent"
  },
  occurEvent: function() {
    this.option.mediator.trigger('OccurEvent');
  }
});

page1.html

<省略>
  <script src="./js/common.js"></script>
  <div id="getEvent"></div>
  <script>
    $(function() {
      new myView1({
        el: "#getEvent"
      }, {
        mediator: mediator
      });
      // Objectが同じものを指しているのか？結果はTrue
      console.log("Object equals:"+Object.is(myView1.option,myView2.option));

    });
</script>
<省略>

page2.html

<省略>
  <div id="OccurEvent">
    <button>OccurEvents</button>
  </div>


<script>
    $(function() {

      new myView2({
        el: "#OccurEvent"
      }, {
        mediator: mediator
      });

      console.log("Object equals:" + Object.is(myView1.option, myView2.option));
    });
</script>
<省略>