javascript – 警告那些不支持新CSS3标准的旧浏览器的用户

我正在尝试将不支持CSS3或iFrame的旧浏览器重定向到警告页面,在此我解释说如果它们继续存在,他们可能会遇到旧版浏览器的问题.

脚本(或其他)应该测试css3可比性而不是浏览器ID.

如果用户使用旧版浏览器查看,则显示在页面顶部的横幅也是可以接受的.

我目前正在使用：
<！ - [if lt IE 9]>< div style ='clear：both;身高：200px;填充：0 0 0 15px; position：relative;'>< a href =“old”>< img src =“old-browser.jpg”border =“0”height =“153”width =“659”alt =“”/&gt ;&LT / A&GT&LT / DIV&GT&LT ENDIF] - GT！; 他们的任何人是否有这方面的经验或链接到一个例子？谢谢.

解决方法:

测试浏览器版本是一种不可靠的方法 – 许多用户不提供该信息,而其他用户则告诉您他们使用的是不同的浏览器.如果您需要特定功能,那么确定它们是否可用的唯一可靠方法是使用javascript来查看它们是否存在.

您是否决定重定向,而不仅仅是更改显示的内容？因为更改当前页面的内容会简单得多.只需在页面中添加以下内容即可：

<div id='warning'>Your browser sucks!</div>

CSS：

#warning {
  /* make this DIV very visible - you could even cover the rest
     of the page if your website is useless without javascript. */
}

现在页面将加载显示#warning,如果存在所需的功能,您可以使用javascript隐藏它(您不想执行反向并使用javascript来显示它,因为如果您的脚本没有显示它,则显示它) t run).有很多方法可以做到这一点,最“标准”的方法是附加一个onload事件.然而,这是一种情况,我认为一种hackish方法要好得多.如果你进行测试加载,那么警告将一直显示,直到javascript执行,这可能是从几分之一秒到几秒钟的任何时间.你真正想做的是在元素显示之前隐藏它,你可以通过向< head>添加这样的东西来实现.部分.

if((function() {
  var t,u,i,j,
    css='textShadow,textStroke,boxShadow,borderRadius,borderImage,opacity'.split(','),
    prefixes=',webkit,moz,o,ms,khtml'.split(','),
    nPrefixes=prefixes.length,
    el=document.createElement('i').style;
  styles:for(i=0;t=css[i];i++) {
    t=t.charAt(0).toUpperCase()+t.substr(1);
    for(j=0;j<nPrefixes;j++) {
      u=prefixes[j]+t;
      if(el[u.charAt(0).toLowerCase()+u.substr(1)]!==undefined)
        continue styles;
    }
    return false;
  }
  return true;
})())
  document.write("<style type='text/css'>#warning {display:none;}</style>");

根据您的示例,这假设您需要的功能是textShadow,textStroke,boxShadow,borderRadius,borderImage和opacity.

你真的不应该在< head>中添加任何其他javascript但是,由于页面在上面的代码完成执行之前不会开始渲染.

标签：javascript,css3,browser-detection,redirect,cross-browser
来源： https://codeday.me/bug/20190902/1792167.html