タスクの良い例はvk.comです。 1つのタブで音楽またはビデオを再生するたびに、他のタブで再生が停止します。 また、この問題を解決するためにインターネットにアクセスすると、
Storage Eventsや
Page Visibility APIの説明、または
Visibility.jsなどの既製のソリューションも見つかるはずです。
ハブには、これらの事柄の概要がすでにあり
ました 。たとえば、
ここなどです。
私はこの道を歩きましたが、私に合った解決策はありませんでした。 シンプルで軽量で、詳細を詳しく調べる必要のないものが欲しかった。
最終的に判明したソリューションの名前は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を使用するなどのオプションもありました。
ストレージイベントの主な問題は、
一部の MSIEによる不十分なサポートです。ただし、最近まで、他のブラウザでもこの問題が発生する場合がありました。
Visibility.jsは基本的にPage Visibility APIのラッパーであるため、Storage Eventsを使用した作業はありません。
DuejJSには、ストレージイベントのクロスブラウザーラッパーがあります。これは、次の哲学で表されています。
1.タブ間の通信は、チャネルを使用して実行されます
2.チャンネル内で、タブはこのチャンネルの他のタブが応答できるイベントをトリガーできます。
チャネルの作成は非常に簡単です。
var ch = duel.channel('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> <script type="text/javascript" src="duel.min.js"></script> <link rel="stylesheet" type="text/css" href="pretty.css"> </head> <body> <div id="preview"><div>PLAY</div></div> <a href="index.html" target="_blank"> </a> <script type="text/javascript"> var player = duel.channel('player'); var previewDiv = document.getElementById('preview'); player.on('stop', function () { var frame = document.getElementsByTagName('iframe')[0]; frame.parentNode.removeChild(frame); previewDiv.style.display = 'block'; document.title = ''; }); previewDiv.onclick = function () { player.broadcast('stop'); 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の別のデモドキュメントを読む