【问题标题】:Change system z-order of BrowserWindow in electron, possible?在电子中更改 BrowserWindow 的系统 z 顺序,可能吗?
【发布时间】:2017-01-18 23:47:24
【问题描述】:

可以这么说,我需要控制主窗口的 z 顺序。总是在最上面不是我的情况。我想把我的窗口放在所有其他窗口的后面和桌面上方。可能吗?是否有 C++ SetWindowPos 函数的类似物?或者可能有一些解决方法?

【问题讨论】:

    标签: javascript desktop-application electron


    【解决方案1】:

    首先,您应该将窗口发送到 z-index 堆栈的后面/底部,然后禁用窗口的 z-index 更改。

    我尝试在我的项目中使用它,最终成功了,如下所示。

    但是,请注意,我的一些代码 cmets 可能不准确。我不是很了解node-ffi,只能通过反复试验才能得到它;我的代码 cmets 只是我试图“理解”我观察到的行为的尝试。

    import ffi from "ffi";
    import ref from "ref";
    import Struct from "ref-struct";
    
    const HWND_BOTTOM = 1;
    export let SetWindowPos_Flags = {
        NOSIZE: 0x0001,
        NOMOVE: 0x0002,
        NOACTIVATE: 0x0010,
    }
    
    export var user32 = new ffi.Library("user32", {
        // return, handle, handleInsertAfter, x, y, cx, cy, flags
        SetWindowPos: ["bool", ["int32", "int32", "int32", "int32", "int32", "int32", "uint32"]],
    });
    
    export function SendWindowToBack(handle: number) {
        user32.SetWindowPos(handle, HWND_BOTTOM, 0, 0, 0, 0, SetWindowPos_Flags.NOMOVE | SetWindowPos_Flags.NOSIZE | SetWindowPos_Flags.NOACTIVATE);
    }
    
    export const WM_WINDOWPOSCHANGING = 0x0046;
    export const SWP_NOZORDER = 0x0004;
    let WINDOWPOS = Struct({
        hwndInsertAfter: ffi.types.int32,
        hwnd: ffi.types.int32,
        x: ffi.types.int32,
        y: ffi.types.int32,
        cx: ffi.types.int32,
        cy: ffi.types.int32,
        flags: ffi.types.uint32,
    });
    export function AddHook(window: Electron.BrowserWindow, disableZIndexChanging = false) {
        window.hookWindowMessage(WM_WINDOWPOSCHANGING, (wParam: Buffer, lParam: Buffer)=> {
            // The "lParam" buffer holds the address to a place in unmanaged memory, which itself holds the address to the actual (unmanaged) struct-data.
            // Thus: js-pseudo-pointer (8-bytes; the lParam Buffer) -> c-pointer (8-bytes, unmanaged) -> struct-data (28-bytes, unmanaged)
            // However, the lParam buffer does not realize it is/could-be a "pseudo-pointer" -- all it knows is that it's holding some random numbers.
            // To access the unmanaged struct-data, we have to tell the js-side that the contents of lParam are actually the address explained above.
            // Then we'll be able to use the Buffer.deref() function to correctly obtain the final struct-data.
    
            // To do this, we:
            // 1) Create a new js-pseudo-pointer (using the modified Buffer class), whose contents/what-it-points-to is marked as of type "pointer to a pointer" (ie. the c-pointer entry above)
            let lParam2 = Buffer.alloc(8);
            lParam2["type"] = ref.refType(WINDOWPOS);
    
            // 2) Fill the js-pseudo-pointer with the actual address to that c-pointer (just copy this address from the unmarked lParam Buffer)
            lParam.copy(lParam2);
    
            // 3) Dereference our js-pseudo-pointer, retrieving the actual struct-data bytes
            let actualStructDataBuffer = lParam2["deref"]() as Buffer;
    
            // 4) Convert the struct-data bytes into a regular JavaScript object
            let windowPos = actualStructDataBuffer["deref"]() as {hwndInsertAfter: number, hwnd: number, x: number, y: number, cx: number, cy: number, flags: number};
    
            // 5) Modify the 7th integer (the flags field) in the (unmanaged) struct-data, to include the new SWP_NOZORDER flag
            if (disableZIndexChanging) {
                //lParam.flags |= SWP_NOZORDER;
                let newFlags = windowPos.flags | SWP_NOZORDER;
                actualStructDataBuffer.writeUInt32LE(newFlags, 6);
            }
        });
    }
    
    // This is the function you actually call from the rest of your program.
    export function SendElectronWindowToBackAndKeepItThere(window: Electron.BrowserWindow) {
        let handleAsBuffer = window.getNativeWindowHandle();
        let handleAsNumber = ref.types.int64.get(handleAsBuffer, 0);
        SendWindowToBack(handleAsNumber);
        AddHook(window, true);
    }
    

    【讨论】:

    • 这太棒了,谢谢分享:) 对于任何可能尝试将其与最新电子版本(我在 8.0.0 上)一起使用的人,您需要使用 ffi-napiref-napi , ref-struct-napi 支持 nodejs 12(最新的电子版本使用)。
    • @giotiskl 是的,ffi (和类似的)repos 似乎在过去几年被作者放弃了(这很奇怪,因为他仍然活跃在 Github 上!); ffi-napi 作为替代品对我来说也很有效。
    • 我已经通过导入像上面提到的 giotiskl 这样的“napi”版本来使这段代码工作。在 vue 项目中设置它时遇到了一些问题,并使用 juejin.cn/post/6854573212341108749 修复它。我恢复到节点 12 而不是节点 15(不确定这是否修复了某些问题或之前连续多次出错)。 @Venryx 可以将此代码复制粘贴到开源项目中吗?如果可以,应该如何获得许可?
    • @Flaff 对代码做任何你想做的事——考虑代码块公共领域(不需要署名)。如果您需要特定的许可证,那么您也可以认为它是 MIT 许可的。 (我在 GitHub 上指定的标准许可证)
    • @Venryx 这个Link 是在 Node.js 14 版本和 Electron 14 版本上运行的示例。我是通过参考您的代码来实现的。谢谢。
    【解决方案2】:

    如果这不是您可以使用parent/child windows 完成的事情,那么您可以通过node-ffi 调用SetWindowPos()(或编写本机Node 模块/插件)。要获得HWNDBrowserWindow,请致电getNativeWindowHandle()。我不知道您如何在 macOS 或 Ubuntu 上本地执行此操作。

    【讨论】:

    • 非常感谢。你真的帮了大忙。
    【解决方案3】:

    您可以在窗口拨打.blur()。它会使其低于其他窗口。

    【讨论】:

    • 漂亮,谢谢!没有很好地记录这是做什么的。 BrowserWindow.blur() 在很多情况下需要保持良好的用户体验,当启动本机操作系统窗口或其他由于某种原因在 Electron 应用程序窗口后面打开的程序时,例如在使用 showItemInFolder() 时。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-06-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-02-05
    • 2012-08-09
    相关资源
    最近更新 更多