我正在制作一个电子应用程序，它将多个网页加载到一个页面中。可以将其想象为一个启动屏幕，该屏幕在一个位置显示几个不同的小部件。用户可以选择他们想要添加的屏幕，计算器，消息收发应用程序等。目前，我将这些“小部件”中的每个加载到其自己的单独的Web视图（类似于iFrame）中，并将每个这些Webview堆叠在彼此的顶部。我这样做的主要原因是，我不希望每个“小部件”的代码都能够看到任何其他页面的任何其他代码（又名“小部件”）。每个Web视图的绝对位置均为0,0，宽度/高度为100％，背景为透明。这样，这些小部件的开发人员就可以完全访问屏幕，或者如果需要的话，可以完全访问屏幕的一部分。
我在这里遇到了我的问题。假设我在网络视图中加载了我的第一个“小部件”，即计算器。在此Web视图下，我在另一个独立的Web视图（消息传递应用程序）中加载了另一个“小部件”。问题是第一个“窗口小部件”，即使它的Webview内容仅使用屏幕的10％，也位于占据屏幕100％的Webview框架中。当用户尝试单击在第一个计算器Web视图下加载的消息传递Web视图时，其鼠标事件将被最顶部的Web视图捕获，并被阻止向下传播。 I feel like a picture may better explain the problem。这张图片可能看起来有些混乱，但是我要显示的Webview＃1（蓝色框）与重叠的Webview＃2（红色框）重叠。虽然我可以很好地单击计算器窗口小部件，但不能单击到消息窗口小部件，因为Webview＃1正在捕获事件。
这就是我的问题。我需要我的鼠标事件才能通过webview＃1传递到webview＃2（然后是＃3 ...＃4 ....＃5 ....等），如果它未落在所述webview中的任何元素上。 / p>
以下是我尝试过的一些事情：
尝试1
将Web视图上的pointer-events CSS属性应用于none，然后将加载到每个Web视图中的HTML的body的{{1}}设置为pointer-events。但是，鼠标事件只会完全通过每个Web视图。
尝试2 实际上，我没有使用Web视图，而是将透明电子窗口加载到彼此的顶部，并在其中加载了每个小部件。不幸的是，透明的窗口仍会在空白区域阻止鼠标事件。
尝试3 在每个网页视图中加载一些javascript，以在页面主体上设置事件处理程序。如果鼠标光标触发并击中页面的背景（不击中元素），则会将消息发送回宿主页面，然后宿主页面将其发送到下面的下一个Web视图，然后重复该过程。我遇到了一些问题，最主要的问题是将事件对象从一个Web视图发送到主机页面，然后从那里返回到另一个Web视图。我相信我正在采取安全预防措施，以防止通过IPC发送事件对象。这也感觉是一个极端的解决方法。
我开始担心的是，这实际上是不可能的。 有什么方法可以实现我想要做的事情吗？我对其他方法可以实现预期的结果持开放态度。 （只要每个网页都看不到其他网页，并且我可以strip out node-integration，我就很高兴）
