0%

一些HTML与JS的小技巧

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

use strict

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

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

JavaScript传递参数

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

1
<script tag1="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],
tag1 = script.getAttribute("tag1");

这样即可获取tag1的值,可以说是非常的巧妙了。

document.write

这个函数可以直接向HTML文档写入任何内容。比如,你需要根据屏幕宽度来加载不同js时,如果希望写入的内容是<script src="main.js"></script>,那么只要这样就可以了:

1
<script> if (screen.width >= 1200) document.write('<script src="main.js"><\/script>'); </script>

JavaScript的字符串可以使用单引号或双引号表示,但是由于要写入的内容里有双引号,使用document.write时应该用单引号括起来,否则需要将双引号转义为\",避免造成错误。如果有多层引号,应将最内层的引号改为HTML转义字符&quot;。而对于这里出现的/,将其改写为了\/,原因是浏览器会认为</script>是闭合标签,造成代码解析错误。
通过document.write可以实现根据不同的条件向HTML写入不同的内容,但是要注意,如果这个时候页面已经加载完毕,document.write会导致页面的内容被清空、覆盖。因此,这个方法不被推荐使用,应该通过其它方式代替。

<noscript>标签

对于某些不支持JavaScript的上古浏览器,以及对于停用了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日

🍭支持一根棒棒糖!