GWT注入JS代码后，JSInterop应使用何种非全局命名空间？

嘿，这个问题我之前帮不少开发者踩过坑——GWT的iframe运行模式确实会让JS的上下文和你预期的全局window不一样，咱们一步步拆解解决方案：

1. 先搞懂GWT的上下文逻辑 #

如果你的GWT应用是传统iframe模式（比如GWT 2.x的标准生产模式），注入的JS默认可能跑到顶层window，但你的GWT代码其实运行在它自己创建的iframe里，这就导致JsPackage.GLOBAL（指向顶层window）找不到你的mydialog.js代码。如果是Super Dev Mode或者GWT 2.8+的无iframe模式，情况又会不一样，但先聚焦你的场景。

方案一：把JS注入到GWT的iframe上下文里 #

如果你想用命名空间的方式解决，首先要确保你的mydialog.js被注入到GWT所在的iframe中，而不是顶层window。用ScriptInjector的时候指定注入窗口为GWT的当前窗口：

ScriptInjector.fromUrl("mydialog.js")
    .setWindow(Window.get()) // 注入到GWT的iframe文档，而不是顶层
    .inject();

注入完成后，JsPackage.GLOBAL就会指向这个iframe的window对象，此时你的JSInterop类就能正确找到mydialog.js里的对象了：

@JsType(isNative = true, namespace = JsPackage.GLOBAL)
public class MyDialog {
    public native void show();
}

方案二：主动获取GWT iframe的window作为命名空间 #

如果注入的JS已经在iframe里但还是找不到，可以直接获取GWT内部的iframe window对象。虽然这用了GWT的内部API（可能随版本变化），但临时测试或特定场景很管用：

// 先通过JSInterop拿到GWT iframe的window
@JsType(isNative = true, namespace = JsPackage.GLOBAL)
private static class GwtInternal {
    @JsProperty
    public static native JavaScriptObject getWindowImpl();
}

// 然后用这个对象作为命名空间载体
@JsType(isNative = true, namespace = "<window-impl>")
public class MyDialog {
    public native void show();
}

// 使用时先绑定命名空间
static {
    // 把GWT的iframe window绑定到<window-impl>命名空间
    Js.setNamespace("<window-impl>", GwtInternal.getWindowImpl());
}

2. 最稳妥的方案：绕开命名空间，用回调传递对象 #

依赖命名空间总是容易受GWT运行模式影响，最可靠的方式是让JS主动把对象传递给GWT，完全不用管上下文：

首先在GWT里定义一个回调接口和JS类型：

@JsFunction
public interface MyDialogProvider {
    MyDialog getDialog();
}

@JsType(isNative = true)
public class MyDialog {
    public native void show();
}

然后修改你的mydialog.js，让它主动调用GWT的回调：

(function() {
    // 定义你的对话框逻辑
    const myDialog = {
        show: () => {
            // 你的弹窗逻辑
            alert("Dialog opened!");
        }
    };

    // 如果GWT已经设置了回调，就把对象传过去
    if (window.gwtDialogCallback) {
        window.gwtDialogCallback(myDialog);
    }
})();

最后在GWT里设置回调并注入脚本：

// 暴露全局回调给JS
@JsProperty(namespace = JsPackage.GLOBAL)
public static native void setGwtDialogCallback(MyDialogProvider callback);

// 初始化逻辑
public void initDialog() {
    // 设置回调，拿到JS对象后直接使用
    setGwtDialogCallback(dialog -> {
        dialog.show();
        return dialog;
    });

    // 注入脚本
    ScriptInjector.fromUrl("mydialog.js").inject();
}

这种方式完全不依赖GWT的内部结构或命名空间，不管是iframe还是无iframe模式都能正常工作。

3. 最后确认你的GWT运行模式 #

别忘了检查你的GWT运行模式：

• Super Dev Mode：默认无iframe，JS会注入到顶层window，此时JsPackage.GLOBAL本来就是正确的，可能是你注入方式不对。
• 传统生产模式：必须确保JS注入到GWT的iframe里，或者用回调方案。

内容的提问来源于stack exchange，提问作者user3689186