位置为本地文件时在父窗口或子窗口中触发函数

问题描述 投票:0回答:1

我正在构建一个包含大量媒体文件的应用程序。 我正处于十字路口。它要么需要一个庞大而混乱的预缓存系统,要么需要使用 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>

这个效果很好。 但它只能在服务器上运行,不能在本地运行。

parent-child local window.opener
1个回答
0
投票

我使用 .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">&nbsp;</div>
</body>

和子窗口:

<html>
<head>
    <script>
        function DoSomething(a) {
            window.opener.postMessage(a, "*");
        }
    </script>   
</head>
<body>
    <button onclick="DoSomething('Hey Dad')">hey Dad</button>   
</body> 
© www.soinside.com 2019 - 2024. All rights reserved.