一些 HTML 与 JS 的小技巧

发表于 分类于 Disqus： 本文字数： 1.1k 阅读时长 ≈ 4 分钟

最近笔者在学习前端设计的时候，知道了很多实用的小技巧，于是决定写一篇文章总结一下。

use strict

在一些脚本中，你或许会在最前面看到单独的一行 "use strict"，这是严格模式的声明。
严格模式对正常的 JavaScript 语义做了一些更改：

  • 严格模式通过抛出错误来消除了一些原有静默错误。
  • 严格模式修复了一些导致 JavaScript 引擎难以执行优化的缺陷：有时候，相同的代码，严格模式可以比非严格模式下运行得更快。
  • 严格模式禁用了在 ECMAScript 的未来版本中可能会定义的一些语法。

JavaScript 传递参数

这是一种向外部 JS 文件传入参数的方法。在 HTML 中写入

1
<script data-flag="1" src="example.js"></script>

在 example.js 中写入

1
2
3
4
var scripts = document.getElementsByTagName("script"),
    script_len = scripts.length,
    script = scripts[script_len - 1],
    flag = script.getAttribute("data-flag");

这样即可获取 data-flag 的值，可以说是非常的巧妙了。

如果不考虑 IE 的支持，也可以直接使用

1
var script = document.currentScript;

dataset

除了使用

1
var flag = script.getAttribute("data-flag");

还有另一种方法可以获得 HTML 标签中形如 data-* 的属性的值，那就是 dataset。与上面等价的写法是

1
var flag = script.dataset.flag;

<noscript> 标签

<noscript> 标签最初是为那些不支持 JavaScript 的上古浏览器而设计。如今，对于停用了 JavaScript 的用户，这个标签可能非常有用。

1
2
3
4
5
<noscript>
<div style="background-color: #5C5C5C; position: fixed; bottom: 50px; left: 80px; opacity: 0.95; border-radius: 15px; color: #FFFFFF;">
    <p style="margin: 15px; max-width: 400px;">系统检测到您的浏览器禁用了JavaScript。为了保障您的浏览体验，请启用JavaScript。</p>
</div>
</noscript>

<a> 标签的 download 属性

设置 <a> 标签的 download 属性，可以在点击该链接时下载目标，即 href 属性指向的超链接。
该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件。例如：

1
<a href="https://www.example.com//images/2017/10/example.jpg" download="logo">

支持该属性的浏览器会将其保存为 logo.jpg。

IE 条件注释

以下类型的注释会被 IE9 及更早的版本读取，而被其他浏览器忽略：

1
2
3
4
<!-- Since Conditional Comments have been deprecated since Internet Explorer 10, the following script will be ignored, so only Internet Explorer 9 (and below) users will be redirected to a page asking to upgrade their browsers. -->
<!--[if IE]>
    <script type="text/javascript" src="./js/upgrade_your_fucking_browser.js"></script>
<![endif]-->

或者

1
2
3
<!--[if lt IE 9]>
    <div class="notice chromeframe">您的浏览器版本<strong>很旧很旧</strong>，为了正常地访问网站，请<a target="_blank" href="https://browsehappy.com" style="color: rgba(239,178,75,1)">立即升级您的浏览器</a></div>
<![endif]-->

在「现代」浏览器占主导的今天，这种条件注释的一个用处是提醒 IE 用户升级浏览器。不过，IE10 及更新的 IE 不会读取这些条件注释。如果想要所有 IE 都看到提醒，可能还要靠别的办法，比如用 JavaScript 判断 User Agent。可以看看微软的文档：Conditional comments are no longer supported。

阻止非法操作

屏蔽 IE 浏览器

前面讲到的 IE 条件注释，可以针对 IE 浏览器做一些适配。但如果网页中使用了大量的 HTML5 和 CSS3 标准的内容，那么任何版本的 IE 都是招架不住的。为了一劳永逸地解决问题，可以屏蔽 IE 浏览器的访问，甚至直接重定向到 Browse Happy。

1
2
3
4
5
6
7
8
9
10
11
12
//Kill XP and IE8
(function() {
    var ua = navigator.userAgent;
    var res = /Windows NT (\d+\.\d+)/.exec(ua);
    var xpOrLower = res && JSON.parse(res[1]) < 6;
    res = /MSIE (\d+\.\d+)/.exec(ua);
    var ie8OrLower = res && JSON.parse(res[1]) < 9;
    if (xpOrLower || ie8OrLower) {
        alert("请不要用XP及之前的Windows系统，和IE8及之前的IE浏览器访问本站！");
        location.href = "about:blank";
    }
})();

屏蔽百度搜索

1
2
3
4
5
var fromBaiduSE = /^https?:\/\/www.baidu.com/.test(document.referrer);
if (fromBaiduSE) {
    alert("检测到你还在使用百度搜索，作为一个程序员，这是一种自暴自弃！\n\n做不作恶的程序员，从不用百度开始！")
    location.href = "about:blank";
}

防盗链

如果是视频、图片等静态资源的防盗链，通过服务器判断 referer 即可阻止非法访问。而要防止自己的页面被其他网站用作 <iframe>，则可以通过以下 JavaScript 代码来实现：

1
2
3
4
if (top.location != self.location) top.location = self.location;
if (document.location.search.match(/type=embed/gi)) {
    window.parent.postMessage("resize", "*");
}

禁止选中复制

监听 onselectstart 事件，即可阻止用户的拖拽选择行为：

1
2
3
4
document.onselectstart = function(event) {
    event.preventDefault();
    return false;
}

其它的一些技巧

如果需要调用 getElementById 之类的函数，务必把 <script> 标签放到对应的元素后面，否则会找不到对象。
将 body 标签写为 <body onload="main()">，那么 main 函数会在页面加载完成后直接运行，通过 window.addEventListener("load", main) 也能达到类似的效果。

文末，再写一些笔者关于 Safari 4.0 的一些回忆吧。
为了测试网站对不同浏览器的友好程度，笔者下载了 Oracle 和 Firefox，看到首次打开 Firefox 的欢迎动画时，突然想到多年之前，在 Windows 上首次运行 Safari 时看到的极为惊艳的欢迎动画。这段动画展示了 HTML5 的诸多新特性。经过推断，那是 2010 年左右，版本是 Safari 4.0。查找各大论坛后，找到了这个 Safari 欢迎动画的网址：http://www.apple.com/safari/welcome/。可惜年代久远，它可能已经永远地从苹果的服务器上消失了。非常遗憾，那个时候的我还 too young，沉迷于制作逐帧 flash 动画，丝毫没有了解 html 的奇妙世界。当今天我的回忆再一次被唤起时，Safari for Windows 已经凉了，Flash 也快凉了，Safari for macOS 已经是 11.0 版本。互联网时代的高速发展实在是令人感慨万千。

拓展阅读：
CSS3 Filter Effects
JavaScript 实例

本文更新于 2018 年 6 月 21 日