关于web前端开发中的noscript标签用法

关于web前端开发中的<noscript>标签用法

在web前端开发中,提高兼容性一直是一个相对棘手的问题。比如网页面向的用户群体在使用不同内核的浏览器,比如chrome、firefox、Safari。同时因为用户群体使用的设备也不一样,这又导致前端开发人员需要考虑各种尺寸的设备上网页显示效果的问题。还有诸如浏览器版本问题导致的兼容问题,比如IE6/7/8以及最新的IE10/11等对相同的标签可能就不能同时兼容。本文主要记录一下当浏览器不支持JavaScript的情况下如何使用<noscript>对用户进行自动提示

<noscript>标签

在网页设计中,为了增强显示效果或者进行数据交互,时常需要用到JavaScript脚本,但是部分浏览器由于安全问题或许默认关闭了js的支持,又或者用户手动禁用了js脚本,网页就会出现问题。比如在chrome浏览器中可以手动关闭对js脚本的支持。操作方法如下图所示
noscript1.png

在这种情况下,如果网页能自动对用户进行友好提示,是非常关键的。<noscript>标签就可以实现这个功能:如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本,则在 HTML <noscript>元素中定义脚本未被执行时的替代内容。

示例代码

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>noscript</title>
</head>
<body>
<!--在浏览器不支持js脚本时做出友好提示-->
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>您的浏览器不支持js脚本,请开启支持或切换到其他浏览器访问!</noscript>
</body>
</html>

效果演示

  • 在正常支持JavaScript的浏览器中运行上述代码会在网页中输出Hello World!
    noscript2.png
  • 在不支持JavaScript的情况下会自动出现友好提示
    noscript3.png

浏览器兼容性

所有浏览器都支持

© 版权声明
THE END
喜欢就支持以下吧
点赞0
分享
评论 抢沙发