Question

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

脚本（或其他）应测试css3的可比性，而不是浏览器ID。

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

我目前正在使用： 

他们的任何人是否有这方面的经验或链接到一个例子？感谢。

Answer 1

测试浏览器版本是一种不可靠的方法 - 许多用户不提供这些信息，而其他用户则告诉您他们使用的是不同的浏览器。如果您需要特定功能，那么确定它们是否可用的唯一可靠方法是使用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来显示它，因为如果您希望显示它脚本不运行）。有很多方法可以做到这一点，最“标准”的方法是附加一个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，因为在上面的代码完成执行之前页面不会开始呈现。

Answer 2

抓取Modernizr并制作一个包含您需要的所有功能的版本。打开modernizr文件并添加类似这样的内容

if(Modernizr.borderradius && Modernizr.cssgradients && Modernizr.textshadow) { var valid = true; var
expires = new Date(); expires.setDate(expires.getDate() + 31); document.cookie = 'browser=modern;
expires='+expires.toUTCString()+'; path=/'; } else { var valid = false; }

替换要测试的功能（即Modernizr.borderradius）我在示例中使用modernizr的文档说明了您自己。我正在向用户添加一个cookie，如果他们的浏览器是兼容的，那么我可以过滤掉用PHP显示代码。

接下来，在您的body标签下方的顶部添加此div和javascript。 javascipt使用jquery隐藏元素，但您可以使用此处显示的其他示例来使用javascript来执行此操作。

<div id="warning_block">
Warning! You are viewing this page in a non compatible browser.
</div>
<script type="text/javascript">
if (valid == false) { $("#warning_block").show(); }
</script>

您也可以包含CSS来设置样式，因此它看起来像一个警告

#warning_block {
display: none;
width: 80%;
border: 1px solid #000;
background: #F00;
color: #FFF;
font-family: arial;
text-align: center;
margin-top: 5px;
margin-left: auto;
margin-right: auto;
padding: 5px;
}

Answer 3

第1步 - 通过javascript或解析服务器端代码上的请求标头来检测您的浏览器版本。

第2步 - 如果不支持该版本，则重定向到警告页面。

（但广泛不支持CSS3和HTML 5。）

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

3 个答案: