识别Blazor应用程序内的浏览器详细信息

Question

[好，我让Microsoft取消了.Net Framework内部的所有很酷的功能，这些功能使我们能够确定浏览器的详细信息。但是我应该如何在Blazor组件的@Code块中获取此信息？我已经尝试了Syjus.BrowserDetector和Wangkanai.Detection并得到了相同的结果。我可以在组件的html部分中收集浏览器详细信息，但不能在Code块中收集。这是因为所有示例都将依赖项注入到MVC样式的组件中，而我没有看到如何使用Blazor Code块执行此操作。感谢所有帮助，我并不特别在意只要能正常工作，如何在代码块，Javascript，函数等内部标识浏览器。

Answer 1

好的，这是一个使用Javascript进行调用以识别浏览器的解决方案。注意：这些步骤通常适用于javascript设置，并且适用于所有js函数。在项目的wwwroot文件夹下创建一个JS文件夹，然后添加一个.js文件。在_hosts.cshtml中，添加对.js文件的文件引用。例如：将您的函数添加到.js文件。在这种情况下，我们正在研究浏览器识别功能。例如：函数identifyBrowser（）{var sBrowser，sUsrAg = navigator.userAgent;

if (sUsrAg.indexOf("Firefox") > -1) {                   // "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
    sBrowser = "Mozilla Firefox";   
} else if (sUsrAg.indexOf("SamsungBrowser") > -1) {     // "Mozilla/5.0 (Linux; Android 9; SAMSUNG SM-G955F Build/PPR1.180610.011) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/9.4 Chrome/67.0.3396.87 Mobile Safari/537.36
    sBrowser = "Samsung Internet";
} else if (sUsrAg.indexOf("Opera") > -1 || sUsrAg.indexOf("OPR") > -1) {         // "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106"
    sBrowser = "Opera";
} else if (sUsrAg.indexOf("Trident") > -1) {            // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
    sBrowser = "Microsoft Internet Explorer";
} else if (sUsrAg.indexOf("Edge") > -1) {               // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
    sBrowser = "Microsoft Edge";
} else if (sUsrAg.indexOf("Chrome") > -1) {             // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
    sBrowser = "Google Chrome or Chromium";
} else if (sUsrAg.indexOf("Safari") > -1) {             // "Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306"
    sBrowser = "Apple Safari";
} else {
    sBrowser = "unknown";
}

return sBrowser;

}

在您的.razor文件中，创建一种调用函数的方法，例如控件。例如：添加@ onclick =“ IdentifyBrowser”在@code段中，添加您的方法。

async Task IdentifyBrowser()
{
    string browser = "";
    browser = await JsRuntime.InvokeAsync<string>(identifier: "identifyBrowser");
    ShowAlert(browser);
}

请注意，此调用正在传递值（字符串），并且函数（.js内部）是您的'identfier'，在本例中为'identifyBrowser'。

注意示例中的'ShowAlert'吗？这是一个不传递值的调用。例如：异步任务ShowAlert（字符串消息）{等待JsRuntime.InvokeVoidAsync（identifier：“ createAlert”，message）;}

请注意，此示例是在Server run Blazor上构建的。因此，当您在IE 11上运行它时，由于它是Web程序集，因此它仍然无法使用。接下来，我将看一下polyfill对实际运行IE 11的承诺。