我正在构建一个包含大量媒体文件的应用程序。 我正处于十字路口。它要么需要一个庞大而混乱的预缓存系统,要么需要使用 HTML 到 EXE 应用程序将其捆绑在一起。 EXE 应用程序是更好的选择。但是,该应用程序有一个在第二个窗口中运行的控制面板。 此时,用户打开控制面板,将其移动到另一个显示器,并可以控制主应用程序。 javascript 使用 window.opener.ParentFunction() 来触发主应用程序中所需的任何内容。
Window.opener 运行良好,但仅限于应用程序在线运行时。 如果它在本地运行,则不会响应。 有没有办法让父窗口或子窗口在本地计算机上进行通信? 我可以让这个应用程序与任一方向上运行的通信一起工作,而我只需要一个方向。 我知道浏览器对窗口之间的通信保持着严格的规则。
在主窗口(parent.html)中我有这个:
<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>
在控制面板(child.html)中我有这个:
<html>
<body>
<h2>This is the child page</h2>
<button onclick="window.opener.DoSomething()">hey Dad</button>
</body>
</html>
这个效果很好。 但它只能在服务器上运行,不能在本地运行。
我使用 .postMessage 解决了这个问题。
父窗口:
<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>
和子窗口:
<html>
<head>
<script>
function DoSomething(a) {
window.opener.postMessage(a, "*");
}
</script>
</head>
<body>
<button onclick="DoSomething('Hey Dad')">hey Dad</button>
</body>