--- title: 'BroadcastChannel: message イベント' slug: Web/API/BroadcastChannel/message_event tags: - Communication - Event - EventSource - Reference - events - message - messaging translation_of: Web/API/BroadcastChannel/message_event ---

message イベントは、メッセージがそのチャネルに到着したときに {{domxref('BroadcastChannel')}} オブジェクトに対して発生します。

バブリング	なし
キャンセル	不可
インターフェイス	{{domxref("MessageEvent")}}
イベントハンドラプロパティ	{{domxref("BroadcastChannel.onmessage","onmessage")}}

例

実例

この例では、ユーザーがボタンをクリックしたときに {{htmlelement("textarea")}} の内容を放送する "Sender" の {{htmlelement("iframe")}} と、放送メッセージを受信し、その結果を {{htmlelement("div")}} 要素に書き込む2つの "Receiver" の <iframe> があります。

Sender

<h1>Sender</h1>
<label for="message">Type a message to broadcast:</label><br/>
<textarea id="message" name="message" rows="1" cols="40">Hello</textarea>
<button id="broadcast-message" type="button">Broadcast message</button>

body {
     border: 1px solid black;
     padding: .5rem;
     height: 150px;
     font-family: "Fira Sans", sans-serif;
}

h1 {
    font: 1.6em "Fira Sans", sans-serif;
    margin-bottom: 1rem;
}

textarea {
    padding: .2rem;
}

label, br {
    margin: .5rem 0;
}

button {
    vertical-align: top;
    height: 1.5rem;
}

const channel = new BroadcastChannel('example-channel');
const messageControl = document.querySelector('#message');
const broadcastMessageButton = document.querySelector('#broadcast-message');

broadcastMessageButton.addEventListener('click', () => {
    channel.postMessage(messageControl.value);
})

Receiver 1

<h1>Receiver 1</h1>
<div id="received"></div>

body {
    border: 1px solid black;
    padding: .5rem;
    height: 100px;
    font-family: "Fira Sans", sans-serif;
}

h1 {
    font: 1.6em "Fira Sans",
    sans-serif; margin-bottom: 1rem;
}

const channel = new BroadcastChannel('example-channel');
channel.addEventListener('message', (event) => {
  received.textContent = event.data;
});

Receiver 2

<h1>Receiver 2</h1>
<div id="received"></div>

body {
    border: 1px solid black;
    padding: .5rem;
    height: 100px;
    font-family: "Fira Sans", sans-serif;
}

h1 {
    font: 1.6em "Fira Sans", sans-serif;
    margin-bottom: 1rem;
}

const channel = new BroadcastChannel('example-channel');
channel.addEventListener('message', (event) => {
  received.textContent = event.data;
});

結果

{{ EmbedLiveSample('Sender', '100%', '170px','' ,'' , 'dummy') }}

{{ EmbedLiveSample('Receiver_1', '100%', '150px','' ,'' , 'dummy') }}

{{ EmbedLiveSample('Receiver_2', '100%', '150px','' ,'' , 'dummy') }}

仕様

仕様	状態
{{SpecName('HTML WHATWG', 'indices.html#event-message')}}	{{Spec2('HTML WHATWG')}}

例

実例

Sender

Receiver 1

Receiver 2

結果

仕様

ブラウザーの互換性

関連情報