最近在学习前端设计的时候，知道了很多实用的小技巧，于是写一篇文章总结一下
使某个函数直接被运行
在<script>标签中没有被函数的大括号{}括起来的代码会被浏览器顺序执行。如果有{}，那么使用 !function(){}(); 也能达到相同的效果。不过如果function()中有getElementById之类的函数，则需要把<script>标签放到对应的元素后面，否则会找不到对象
在body中添加 onload=”main()” 那么main函数会在页面加载完成后直接运行，也能达到类似的效果
document.write
这个函数直接向html文档写入任何内容。比如，你需要根据屏幕宽度来加载不同js时，如果希望写入的内容是<script src=”main.js”></script>，那么只要这样就可以了。
<script>
if(screen.width>=1200)document.write(‘<script src=”main.js”><\/script>’);
</script>
由于script标签里有双引号,使用document.write时应该用单引号括起来，否则会造成错误。如果有多层引号，应将最内层的引号改为转义字符"而对于所有的/，应改为\/。这样就实现了根据不同的条件向html写入不同的内容。
noscript标签
对于某些不支持js的上古浏览器，以及对于停用了js的用户，noscript标签可能非常有用
<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>
JavaScript传递参数
在html中写入
<script tag1=”1″ src=”main.js”></script>
在js中写入
var scripts = document.getElementsByTagName(“script”),
script_len = scripts.length,
script = scripts[script_len – 1],
tag1 = script.getAttribute(“tag1″);
即可获取tag1的值，可以说是非常的巧妙了
IE条件注释
以下类型的注释会被IE9及更早的版本读取，而被其他浏览器忽略
<!– 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]–>
或者
<!–[if lt IE 9]>
<div class=”notice chromeframe”>您的浏览器版本<strong>很旧很旧</strong>，为了正常地访问网站，请升级您的浏览器 <a target=”_blank” href=”http://browsehappy.com”>立即升级</a>
</div>
<![endif]–>
这种条件注释现在已经完全被用于提醒IE用户升级浏览器。不过，IE10及更新的IE不会读取这些条件注释。如果想要所有IE都看到提醒，可能还要靠别的办法，比如js
响应式页面的设计
这个问题较为复杂。就说“屏幕宽度”，设备的物理分辨率、逻辑分辨率、出现滚动条时参数都各不相同。我在css中使用
@media screen and (max-width: 1200px)
这样的代码，识别的似乎是逻辑分辨率。而在html中使用以下代码
<meta name=”viewport” content=”user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width”/>
在Retina屏幕的iPhone上直接缩放爆炸，看得我一脸懵逼。目前还在寻找解决方案。
关于Safari 4.0以及最初的Html5的一些回忆
为了测试网站对不同浏览器的友好程度，我下载了Oracle和Firefox，看到首次打开Firefox的欢迎动画时，突然想到多年之前，我在Windows上首次运行Safari时看到的极为惊艳的动画。经过推断，那是2010年左右，版本是Safari 4.0。查找各大论坛后，找到了这个Safari欢迎动画的网址http://www.apple.com/safari/welcome/可惜年代久远，它（可能）已经永远地从苹果的服务器上消失了。非常遗憾，那个时候的我还too young，沉迷于制作逐帧flash动画，丝毫没有了解html的奇妙世界。当今天我的回忆再一次被唤起时，Safari for Windows已经凉了，Flash已经凉了，Safari for macOS已经是11.0版本。互联网时代的高速发展实在是令人感慨万千。
发表回复