I am building an app with heavy media files. I am at a crossroads. It either needs a hefty messy pre-caching system or it needs to be bundled together using an HTML to EXE app. The EXE app is preferable. However, the app has a control panel that runs in a second window. At the moment, the user opens the control panel, moves it to another display monitor, and can control the main app. The javascript uses window.opener.ParentFunction() to trigger anything it needs in the main app.
Window.opener works well, but only when the app is running online. If it runs locally, it does not respond. Is there a way to get parent or child windows to communicate on a local machine? I could make this app work with the communication running in either direction, and I only need one direction. I know browsers maintain strict rules on communication between windows.
In the main window (parent.html) I have this:
<html>
<body>
<h2>This is the parent page</h2>
<button onclick="OpenControlPanel()">Open Control Panel</button>
<div id="SomeText">ABCDE</div>
<script>
function OpenControlPanel(){
ControlPanel = window.open('child.html', 'controls','height=480,width=640,left=200,top=200,location=no,menubar=no,resizeable=0,status=no,toolbar=no,titlebar=no');
}
function DoSomething(){
document.getElementById("SomeText").innerHTML="FGHIJ";
}
</script>
</body>
</html>
In the control panel (child.html) I have this:
<html>
<body>
<h2>This is the child page</h2>
<button onclick="window.opener.DoSomething()">hey Dad</button>
</body>
</html>
This works great. But it only works from the server, not locally.
2
I solved this using .postMessage. Window.opener is still used, but by including postMessage in the child and then .addEventListener in the parent window, the trigger is passed through.
The parent window:
<html>
<head>
<script>
window.addEventListener("message", function(event) {
document.getElementById('OutputInfo').innerHTML=event.data;
}, true);
var ChildWindow;
function openChild() {
ChildWindow = window.open('ChildWindow.html', 'controls','height=320,width=480,left=200,top=200,location=no,menubar=no,resizeable=0,status=no,toolbar=no,titlebar=no');
}
</script>
</head>
<body>
<div>This is the parent window.</div>
<br>
<div onclick="openChild()" class="clickable">Open the child window</div>
<br>
<div id="OutputInfo"> </div>
</body>
and the child window:
<html>
<head>
<script>
function DoSomething(a) {
window.opener.postMessage(a, "*");
}
</script>
</head>
<body>
<button onclick="DoSomething('Hey Dad')">hey Dad</button>
</body>