アプリケーションで、あるタブから別のタブを複製して欲しくないときがあります(ひとつのタブだけ)
これまではCockieとか使ってたみたいなのですが、最近のブラウザであればブロードキャストをつかってかけそうです。
これで、複製すると元のタブのBodyを潰せます(クローズまでは出来ません)
const channel = new BroadcastChannel('tab');
channel.postMessage('another-tab');
channel.addEventListener('message', (event) => {
if (event.data === 'another-tab') {
document.body.innerHTML = `新しいタブが開かれたためクローズしました。`;
}
});
いま開いたタブを検知したい場合は……実はよく分かりません。イベントにイベントを返せば元のタブにレスポンス返せると思い次のように書いたのですが、event.sourceがnullですとか言われてエラーになります。
const channel = new BroadcastChannel('tab');
channel.postMessage('another-tab');
channel.addEventListener('message', (event) => {
if (event.data === 'another-tab') {
event.source.postMessage("another-tab-response");
}else if(event.data === 'another-tab-response'){
document.body.innerHTML = `このサイトではタブの複製は禁止されています。`;
}
});