如何在Xamarin.Forms WebView中隐藏指定的网页元素

核心实现逻辑 #

• 必须在WebView页面加载完成后执行JS操作，避免DOM未渲染导致找不到目标元素，推荐监听Navigated事件触发执行逻辑。
• 隐藏id为test的元素的JS语句为：document.getElementById('test').style.display = 'none'，直接通过EvaluateJavaScriptAsync传入执行即可。

完整代码示例 #

// 给WebView绑定页面加载完成事件
webView.Navigated += async (sender, args) =>
{
    // 仅页面加载成功时执行逻辑
    if (args.Result != WebNavigationResult.Success) return;
    
    try
    {
        // 执行JS隐藏指定元素
        await webView.EvaluateJavaScriptAsync("document.getElementById('test').style.display = 'none';");
    }
    catch
    {
        // 异常捕获：可处理目标元素不存在、JS执行失败等兼容场景
    }
};

常见场景补充 #

• 若目标元素是页面加载后动态渲染生成的，可添加适当延时执行，或通过JS注入MutationObserver监听DOM变化，匹配到目标元素后再执行隐藏操作。
• 如需隐藏多个元素，可直接拼接多条JS语句，语句之间用分号分隔即可。

内容的提问来源于stack exchange，提问作者Алмаз Сапарбаев