Angular 6浏览器检测？
我有一个angular6应用程序，我们只支持铬，但我希望出现一个页面/信息，用户试图导航到IE中的应用程序说，它是不支持的，粘贴此链接到铬或下载铬。
我是否需要一个polyfill才能使应用程序在IE上运行以显示此消息，或者是否有某种浏览器检测可用于仅显示此弹出消息？
我知道你可以在TS中做浏览器检测，我有，但这意味着我需要一个IE polyfill，这样应用程序将加载甚至显示页面。
// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';
// Safari 3.0+ "[object HTMLElementConstructor]"
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);
// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
var isChrome = !!window.chrome && !!window.chrome.webstore;
// Blink engine detection
var isBlink = (isChrome || isOpera) && !!window.CSS;
var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
output += 'isEdge: ' + isEdge + '<br>';
output += 'isBlink: ' + isBlink + '<br>';
document.body.innerHTML = output;有什么想法？谢谢!
回答 3
Stack Overflow用户
发布于 2018-10-16 03:11:20
在app.component.ts的ngOninit中，使用if else块。在下面的示例中，用户在关闭警报后被带回上一个(非Angular)页面，因此angular的其余部分不会加载。
if (isIE) {
alert('Message for users about not using IE');
window.history.go(-1);
} else {
// the rest of ngOnInit
}Stack Overflow用户
发布于 2019-12-09 19:04:55
window.navigator.userAgent将用户代理作为string保存。要检测浏览器，需要解析userAgent
为了检测Microsoft Internet Explorer和Microsoft Edge，我们使用以下条件
window.navigator.userAgent.toLowerCase().indexOf('trident') > -1 ||
window.navigator.userAgent.toLowerCase().indexOf('edge') > -1
但最好不要重复发明轮子。相反，可以使用像bowsernpm install bowser这样的包
现在导入并获取详细信息
import * as Bowser from "bowser";
// ......
userAgent = Bowser.parse(window.navigator.userAgent);
browser = Bowser.getParser(window.navigator.userAgent);示例：https://stackblitz.com/edit/angular-bowser
附注:还要注意，对于Microsoft Edge Beta(当前的version=79.0.309.43)，navigator.userAgent.toLowerCase().indexOf('edge') > -1失败，因为userAgent是
AppleWebKit/537.36 (
，像壁虎一样)Chrome/79.0.3945.74Safari/537.36 Edg/79.0.309.43
Stack Overflow用户
发布于 2019-12-09 18:01:01
您也可以在index.html中添加此内容
<script>
var browserName = getBrowserName();
if (browserName == 'ie') {
alert("IE is not supported")
}
function getBrowserName() {
const agent = window.navigator.userAgent.toLowerCase()
switch (true) {
case agent.indexOf('edge') > -1:
return 'edge';
case agent.indexOf('opr') > -1 && !!(window).opr:
return 'opera';
case agent.indexOf('chrome') > -1 && !!(window).chrome:
return 'chrome';
case agent.indexOf('trident') > -1:
return 'ie';
case agent.indexOf('firefox') > -1:
return 'firefox';
case agent.indexOf('safari') > -1:
return 'safari';
default:
return 'other';
}
}
</script>https://stackoverflow.com/questions/52184476
复制相似问题
腾讯云开发者
