Javascript ElectronJS：避免跨产地问题

在正常情况下，具有页面间通信的web应用程序不需要担心跨源访问，如果它们的页面是从“http”协议中的同一域提供的。Electron似乎在默认情况下通过“文件”协议使用网页构建应用程序。此协议不允许任何页间通信

如果我的Electron应用程序需要页面间通信（在本例中是通过iframe），那么我认为该应用程序需要与Electron一起运行Web服务器，对吗？这似乎太过分了，我还没有看到太多关于它的讨论，但我看不到任何更好的解决办法。有一个用于定制协议的Electron API，但是文档没有显示如何使用定制协议，只是显示如何设置它们，我还没有找到任何关于它的好教程

总的来说，ElectronJS作为一个框架和社区给我留下了深刻的印象，所以我很惊讶，在认真搜索之后，我还没有找到解决这个问题的方法。我发现这个问题被问了很多次，但没有确切的答案。我真的很想得到一些启示

更新：

---

我现在看到，我的情况的细节（需要在父窗口和iframe之间进行对话）使得这个问题比有两个单独的窗口（例如主窗口和设置窗口）时更棘手，因为主进程通常可以通过IPC充当一个连接。这当然解释了为什么解决方案如此难以捉摸。

我终于找到了解决这个问题的方法：Window.postMessage。这是一种HTML5技术，允许在包含iFrame在内的跨源独立窗口之间传递消息。令人惊讶的是，它和“文件”协议（即无Web服务器）配合使用效果很好，所以它对Electron中的iFrame非常有效

下面是一个工作示例。我有两个文件：parent.html和child.html。前者有一个iframe，其中包含后者：

parent.html

发送

功能接收消息（evt）
{
document.getElementById（'o'）.innerHTML+=evt.data+“
”；
}
window.addEventListener（“消息”，receiveMessage，false）；
document.getElementById（'b'）。onclick=function（）
{
//父母和孩子之间的第二个区别如下
document.getElementById（'f'）.contentWindow.postMessage（“父到子”，“*”）；
}

我终于找到了解决这个问题的方法：Window.postMessage。这是一种HTML5技术，允许在包含iFrame在内的跨源独立窗口之间传递消息。令人惊讶的是，它和“文件”协议（即无Web服务器）配合使用效果很好，所以它对Electron中的iFrame非常有效

下面是一个工作示例。我有两个文件：parent.html和child.html。前者有一个iframe，其中包含后者：

parent.html

发送

功能接收消息（evt）
{
document.getElementById（'o'）.innerHTML+=evt.data+“
”；
}
window.addEventListener（“消息”，receiveMessage，false）；
document.getElementById（'b'）。onclick=function（）
{
//父母和孩子之间的第二个区别如下
document.getElementById（'f'）.contentWindow.postMessage（“父到子”，“*”）；
}

根据您的描述，您可以尝试从页面调用一些内部服务器API。对于electron，你有一个类似的架构，主进程是你的服务器，渲染器处理你的网页，然后你在2个调用之间使用IPC而不是HTTP调用。啊，是的。如果我有两个窗口（例如，一个主窗口和一个设置窗口），答案会更简单，因为主进程可以充当这两个窗口之间的连接。然而，在我的例子中，我需要在父窗口和子iframe之间进行通信，在这一点上，我看不出主进程是如何涉及的。不过，这确实解释了为什么答案如此难以捉摸。我的情况比平常更为特殊。根据您的描述，您似乎想尝试从页面中调用一些内部服务器API。对于electron，你有一个类似的架构，主进程是你的服务器，渲染器处理你的网页，然后你在2个调用之间使用IPC而不是HTTP调用。啊，是的。如果我有两个窗口（例如，一个主窗口和一个设置窗口），答案会更简单，因为主进程可以充当这两个窗口之间的连接。然而，在我的例子中，我需要在父窗口和子iframe之间进行通信，在这一点上，我看不出主进程是如何涉及的。不过，这确实解释了为什么答案如此难以捉摸。我的处境比平常更为特殊。