如何将事件传递到隐藏的<浏览器>？

发布于 2024-10-18 15:40:29 字数 2002 浏览 1 评论 0原文

我正在使用 XULRunner 1.9.2 围绕浏览器开发一个简单的视图。

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/"?>
<window
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    xmlns:html="http://www.w3.org/1999/xhtml">
  <hbox equalsize="always" flex="2">
    <browser flex="1" type="content-primary"/>
    <html:canvas flex="1"/>
  </hbox>
</window>

我编写了一些 Javascript 来处理来自的 MozAfterPaint 事件，并使用 将它们推送到 drawWindow，然后执行一些魔法。这一切都运行得相当好。（好吧，滚动条和光标有点奇怪，但我可以忽略它们。）

我真的希望画布成为唯一可见的元素，但我现在只能与浏览器元素交互。

我取得了部分成功：

捕获上的事件并将它们重新注入。
我可以使用每个事件的clientX和clientY到画布上，查找相应的document.elementFromPoint(x, y)在浏览器中，并相应地 createEvent initEvent dispatchEvent 。
但是，这只适用于键（向下/按下/向上）、单击和鼠标（向下/移动/向上）。我不知道如何合理地合成 mouse(over/out) 事件，并且 DOMMouseScroll 不会在此处触发，因此我无法捕获滚轮事件。

我没有成功：

将画布堆叠在浏览器上方。
```
  <浏览器 flex="1" type="content-primary"/>
  
```
这需要某种方法来允许事件通过画布并到达浏览器，我还没有真正尝试过，因为有一个更直接的问题：
尽管画布应该堆叠在浏览器上方，但浏览器在画布上方可见。
将浏览器堆叠在画布上方，同时使其透明。
```
  
  <浏览器 flex="1" type="content-primary" style="opacity: 0;"/>
```
从理论上讲，我根本不应该以这种方式扰乱事件。但是，opacity 设置似乎没有任何好处，并且浏览器仍然遮挡画布。

如何隐藏浏览器但仍允许与其正常交互？

（我并不反对编写本机代码，WebKit 的答案也很好。但据我所知，Gecko 和 WebKit 都没有离屏渲染 API，并且没有与 MozAfterPaint 等效的 WebKit > 和drawWindow。）

原文

I've working on a simple view around a browser using XULRunner 1.9.2.

<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="chrome://global/skin/"?>
<window
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    xmlns:html="http://www.w3.org/1999/xhtml">
  <hbox equalsize="always" flex="2">
    <browser flex="1" type="content-primary"/>
    <html:canvas flex="1"/>
  </hbox>
</window>

I've written some Javascript that handles MozAfterPaint events from the <browser>, pushes them to the <canvas> with drawWindow, and then does some magic. It all works fairly nicely. (Well, scrollbars and cursors are kinda wonky, but I can ignore those.)

I really want the canvas to be the only visible element, but I can only interact with the browser element right now.

What I've had partial success with:

Capture events on the <canvas> and re-inject them into the <browser>.
I can use the clientX and clientY of each event to the canvas, look up the corresponding document.elementFromPoint(x, y) in the browser, and createEvent initEvent dispatchEvent appropriately.
However, this only works well for key(down/press/up), click, and mouse(down/move/up). I don't see how to reasonably synthesize mouse(over/out) events, and DOMMouseScroll doesn't fire here so I can't capture scroll wheel events.

What I've had no success with:

Stacking the canvas above the browser.
```
<stack flex="2">
  <browser flex="1" type="content-primary"/>
  <html:canvas flex="1"/>
</stack>
```
This requires some way of allowing events to pass through the canvas and onto the browser instead, which I haven't really tried yet, because there's a more immediate problem:
Even though the canvas should be stacked above the browser, the browser is visible above the canvas.
Stack the browser above the canvas while making it transparent.
```
<stack flex="2">
  <html:canvas flex="1"/>
  <browser flex="1" type="content-primary" style="opacity: 0;"/>
</stack>
```
In theory, I shouldn't have to mess with events at all this way. However, the opacity setting doesn't seem to do any good, and again, the browser still occludes the canvas.

How do I hide the browser yet still allow normal interaction with it?

(I'm not adverse to writing native code, and WebKit answers are fine too. But as far as I can tell, neither Gecko nor WebKit have off-screen rendering APIs, and there's no WebKit equivalents to MozAfterPaint and drawWindow.)

分享到QQ

分享到微博