如何从带AllowForWeb属性的WinRT组件C#代码触发WebView内JS自定义事件

嘿，我明白你已经搞定了JS调用C#的反向流程，现在要实现从C#主动触发WebView里的JS自定义事件对吧？这其实可以通过宿主应用中转的方式来实现，因为WinRT组件本身不能直接操作WebView（出于架构隔离的设计），下面给你一步步拆解具体实现：

步骤1：修改WinRT组件，添加事件通知机制 #

首先在你的WebViewInjectionObject里新增一个事件，用来通知宿主应用“我要触发JS事件了”，同时提供触发这个事件的方法：

// 定义触发JS事件的委托
public delegate void TriggerJsCustomEventHandler(string eventName, string eventData);

[AllowForWeb]
public sealed class WebViewInjectionObject {
    // 你原来的反向流程代码（JS调用C#）
    public delegate void NotifyAppHandler(string str);
    public event NotifyAppHandler OnNotifyApp;
    public void NotifyApp(string str) {
        OnNotifyApp?.Invoke(str);
    }

    // 新增：通知宿主触发JS自定义事件的事件
    public event TriggerJsCustomEventHandler OnTriggerJsCustomEvent;

    // 组件内部调用这个方法，即可发起JS事件触发请求
    public void TriggerJsCustomEvent(string eventName, string eventData) {
        OnTriggerJsCustomEvent?.Invoke(eventName, eventData);
    }
}

步骤2：在宿主应用中绑定事件并执行JS代码 #

在你的UWP宿主应用里，把WinRT组件注入WebView后，订阅组件的OnTriggerJsCustomEvent事件，当事件触发时，调用WebView的ExecuteScriptAsync方法执行JS代码来触发自定义事件：

// 假设你的WebView控件名为MyWebView
var injectionObj = new WebViewInjectionObject();
// 将对象注入WebView，供JS调用（原来的逻辑保留）
MyWebView.AddWebAllowedObject("webViewInjection", injectionObj);

// 订阅组件的事件，处理JS触发请求
injectionObj.OnTriggerJsCustomEvent += async (eventName, eventData) => {
    // 注意：如果eventData包含特殊字符（比如引号、换行），一定要做转义处理！
    // 这里用Json序列化来避免转义问题，需要引用Newtonsoft.Json NuGet包
    string serializedData = Newtonsoft.Json.JsonConvert.SerializeObject(eventData);
    
    // 构造触发自定义事件的JS代码
    string jsCode = $"const customEvent = new CustomEvent('{eventName}', {{ detail: {serializedData} }}); window.dispatchEvent(customEvent);";
    
    // 执行JS代码
    await MyWebView.ExecuteScriptAsync(jsCode);
};

步骤3：在WebView的JS代码中监听自定义事件 #

最后在WebView加载的HTML/JS里，监听你要触发的自定义事件即可：

// 监听名为myCustomEvent的自定义事件
window.addEventListener('myCustomEvent', function(e) {
    console.log('收到C#触发的事件：', e.detail);
    // 这里写你的事件处理逻辑
});

怎么在WinRT组件里触发？ #

当你的WinRT组件的C#代码需要触发JS事件时，只需要调用TriggerJsCustomEvent方法就行：

// 比如在组件的某个业务逻辑完成后
TriggerJsCustomEvent("myCustomEvent", "这是来自C#的事件数据");

这样整个流程就通了：WinRT组件触发事件 → 宿主应用接收并调用WebView执行JS → JS监听并处理事件。

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