Communicating Windows

Send Message to Child Frame

Open Child Frame Submit

Parent Frame HTML

<div class="row"> <div class="w:6"> <form id="parent"> <div class="form:theme:gl0b3x"> <div class="position:relative pt:4px pb:16px"> <input id="message" name="message" type="text"> <label for="message"> <span class="description">Send Message to Child Frame</span> </label> </div> <button type="button" class="button:blue uppercase" id="open-window-button">Open Child Frame</button> <button type="submit" class="button:blue uppercase">Submit</button> </div> </form> </div> <div class="w:6"> <div class="color:blue heebo:bold fs:14px">Message from Child Frame</div> <div id="from-child" class="py:12px"></div> </div> </div>

Parent Frame JavaScript

storm_eagle.module('communicating_with_child_window', () => { 'use strict'; let self; let _CHILD_WINDOW = null; return { initialize: () => { self = storm_eagle.communicating_with_child_window; self.add_open_window_listener(); self.add_form_submit_listener(); self.add_message_listener(); }, add_open_window_listener: () => { document.getElementById("open-window-button").addEventListener("click", event => { let params = 'location=1, status=1, menubar=1, toolbar=1, width=650, height=800, left=900, top=200'; _CHILD_WINDOW = window.open(`/examples/communicating-windows/child/`, `_blank`, params); }); }, add_form_submit_listener: () => { document.getElementById("parent").addEventListener("submit", event => { event.preventDefault(); event.stopPropagation(); _CHILD_WINDOW.postMessage(document.getElementById("message").value, window.location.origin); }); }, add_message_listener: () => { window.addEventListener('message', event => { document.getElementById("from-child").innerHTML = event.data; }); } }; })

Child Frame HTML

<div class="row pt:32px"> <div class="w:6"> <form id="child"> <div class="form:theme:gl0b3x"> <div class="position:relative pt:4px pb:16px"> <input id="message" name="message" type="text"> <label for="message"> <span class="description">Send Message to Parent Frame</span> </label> </div> <button type="submit" class="button:blue uppercase">Submit</button> </div> </form> </div> <div class="w:6"> <div class="color:blue heebo:bold fs:14px">Message from Parent Frame</div> <div id="from-parent" class="py:12px"></div> </div> </div>

Child Frame JavaScript

storm_eagle.module('communicating_with_parent_window', () => { 'use strict'; let self; return { initialize: () => { self = storm_eagle.communicating_with_parent_window; self.add_form_submit_listener(); self.add_message_listener(); }, add_form_submit_listener: () => { document.getElementById("child").addEventListener("submit", event => { event.preventDefault(); window.opener.postMessage(document.getElementById("message").value, window.location.origin); }); }, add_message_listener: () => { window.addEventListener('message', event => { document.getElementById("from-parent").innerHTML = event.data; }); } }; })