0%

一些 HTML 与 JS 的小技巧

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

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 的值,可以说是非常的巧妙了。

dataset

除了使用

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

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

1
var flag = script.dataset.flag;

<noscript> 标签

对于停用了 JavaScript 的用户,<noscript> 标签可能非常有用。

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或<a target="_blank" href="http://browsehappy.com" class="a" style="color: rgba(239,178,75,1)">升级浏览器</a></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="http://browsehappy.com">立即升级</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 日