ハブには、これらの事柄の概要がすでにありました 。たとえば、 ここなどです。
私はこの道を歩きましたが、私に合った解決策はありませんでした。 シンプルで軽量で、詳細を詳しく調べる必要のないものが欲しかった。
最終的に判明したソリューションの名前はDuelJS（ランダムに一意の名前）になりました。以下では、不必要な批判を避けるために、Visibility.jsと比較してみます。
アクティブなタブ
visibility.jsの「このタブは現在アクティブです」という状態を簡単に反映するための便利なクロスブラウザーラッパーは、次のようになります。
if ('visible' == Visibility.state()) { // }
[可視性]タブには3つの状態があります： visible 、 hidden 、 prerender 。
Visibilityには、タブのアクティブ化、アクティブウィンドウでのsetIntervalなど、さまざまなイベントで待機できるコールバックもあります。
DuelJSの哲学はわずかに単純化されています。
1.すべてのタブには、 マスターとスレーブの 2つの状態しかありません
2.マスタータブは、作業が実行されるタブです-これ以上、誰もがスレーブを持っています。
このアプローチでは、 window.isMaster（） -タブがウィザードであるかどうかを確認する関数のみで十分です。
if (window.isMaster()) { // }
タブ間の通信
次に、タブ間の通信に渡します。 Storage Eventsを使用するのが最も適切なソリューションのように思えましたが、問題がないわけではありません。 ちなみに、GoogleでpostMessage APIやWebSocketを使用するなどのオプションもありました。
ストレージイベントの主な問題は、
Visibility.jsは基本的にPage Visibility APIのラッパーであるため、Storage Eventsを使用した作業はありません。
DuejJSには、ストレージイベントのクロスブラウザーラッパーがあります。これは、次の哲学で表されています。
1.タブ間の通信は、チャネルを使用して実行されます
2.チャンネル内で、タブはこのチャンネルの他のタブが応答できるイベントをトリガーできます。
チャネルの作成は非常に簡単です。
var ch = duel.channel('channel_name'); // channel_name -
次に、 qwertyイベントが呼び出されたときの動作を定義します。
ch.on('qwerty', function (a, b, c, ...) {})
チャネルのonメソッドは、その動作を決定します。 2番目のパラメーターで渡される関数には、好きなだけ引数を含めることも、まったく引数を持たないこともできます。
イベントの実行も同様に簡単です。 onという単語は broadcastに置き換えられ、渡された引数はイベント名の後に挿入されます。
ch.broadcast('qwerty', a, b, c, ...)
vk.comのような動作を持つプレーヤーを作成する
せっかちな読者のために、私はすぐに実際の例へのリンクを提供します。
アプリケーションの主な本質は、次の3行です。
1. var player = duel.channel（ 'player'）; （チャネル定義）
2. player.on（ 'stop'、function（）{...（停止イベントの動作を決定する）
3. player.broadcast（「停止」）; （停止イベントを開始）
完全なページコードは次のとおりです。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- (title) . --> <script type="text/javascript" src="duel.min.js"></script> <link rel="stylesheet" type="text/css" href="pretty.css"> </head> <body> <!-- div #preview , iframe youtube --> <div id="preview"><div>PLAY</div></div> <a href="index.html" target="_blank"> </a> <script type="text/javascript"> /** player */ var player = duel.channel('player'); /** - */ var previewDiv = document.getElementById('preview'); /** * player */ player.on('stop', function () { /** * iframe */ var frame = document.getElementsByTagName('iframe')[0]; frame.parentNode.removeChild(frame); /** * */ previewDiv.style.display = 'block'; /** * */ document.title = ''; }); previewDiv.onclick = function () { /** * stop player */ player.broadcast('stop'); /** * iframe youtube */ var frame = document.createElement("iframe"); frame.width = '859'; frame.height = '480'; frame.src = '//www.youtube.com/embed/xsV8TrF4gN0?rel=0&autoplay=1'; frame.frameborder = '0'; /** * */ previewDiv.parentNode.insertBefore(frame, previewDiv.nextSibling); previewDiv.style.display = 'none'; /** * */ document.title = '...'; } </script> </body> </html>
おわりに
このソリューションがあなたを助け、あなたがあなたのプロジェクトでそれを使用するならば、私は非常にうれしいです。 私は改善のためのアイデアを受け入れています。 Libaはクロスブラウザであり、組み込みのハッキングによりIEを含めて動作します。
便利なリンク
サイト上の簡単なDuelJSドキュメント
GitHubのDuelJSリポジトリ
DuelJSの別のデモ
ドキュメントを読む