说说alert()的那些事儿-------javascript

几乎每个人学习javascript（以下简称JS）都是先接触到的这个alert()的吧，但是，说实话，我们又对它了解多少呢？

其实通过这个alert();能看到的东西还真的不少。

1，JS阻塞。

2，浏览器显示页面的方式。

3，JS函数劫持。

4，函数回调、alert对话框模拟。

一、JS阻塞

问题：

之前做一个项目，点击一个链接，从页面a跳转到页面b,然后在页面b通过后台加载一些数据，并通过JS写到页面上。这时候呢，就有一个问题，页面老是跳转不过去，总是在页面a卡住，然后一直到b页面的JS执行完才跳转过去，并显示b页面。

解决方式：

这时候alert出场了，在页面b加一个alert，以上问题立马解决，可以看到页面很快的跳转。

为什么会这样？

因为alert之后，alert下面的代码会停止执行，并且浏览器会根据情况更新和渲染页面，这就牵扯到一个问题，JS的运行机制。JS是单线程的，也就是所谓的没有线程，所以前面的代码没有执行完，后面的就无法执行，要想执行后面的，就得让前面的先暂停。所以

alert后，你不点击确认，后面就无法操作，

不能用alert怎么解决？

要想不用alert解决就要了解一下浏览器的显示方式

二、浏览器显示页面的方式

加载代码和文件：

浏览器是按照从上到下的顺寻来解析显示页面的，首先是<head></head>然后是<body></body>一步一步来解析HTML的，在这个顺序的过程中，如果有JS或者CSS文件的调用，浏览器就会先根据路径把这些文件下载下来，并把这些代码"看"一遍，看完之后有可能执行一部分，也有可能接着往下解析HTML。然后等所有的一切DOM准备妥当，页面就该渲染CSS效果的渲染效果，该添加事件的添加事件。这就是一个整体的顺序。

执行：

浏览器遇到可执行的代码就会执行，无论是HTML还是CSS或者JS，所以说HTML里面，顺序很重要，如果浏览器遇到大量的JS要“看”，或者执行，那么页面下面的东西就不会执行，这不是因为JS阻塞，而是因为目前的大部分浏览器都是单线程的执行方式，所以alert一出现，JS没法往下执行了，浏览器也没法往下执行了，之前已经被浏览器解析过的部分就会显示出来，这也是我alert之后能看到页面立即跳转的原因（我当时JS都放在body后面），

新的解决方式：

知道了上面的原因，我们就可以去想办法解决问题，我的页面不能跳转的原因很明显是因为浏览器在加载数据，导致页面看上去无响应，没有跳转，因此，必须让浏览器页面完全加载完毕后，再去执行JS，这时候就要用到onload事件。然而，不同的浏览器对onload的解释也不统一，这时候查了些资料发现这么一段代码（感谢作者，虽然我不知道原作者是谁）：

function loadScript(url, callback){    var script = document.createElement ("script")    script.type = "text/javascript";    if (script.readyState){ //IE        script.onreadystatechange = function(){            if (script.readyState == "loaded" || script.readyState == "complete"){                script.onreadystatechange = null;                callback();            }        };    } else { //Others        script.onload = function(){            callback();        };    }    script.src = url;    document.getElementsByTagName("head")[0].appendChild(script);}

使用方法如下：
loadScript("script1.js", function(){    loadScript("script2.js", function(){        loadScript("script3.js", function(){            alert("All files are loaded!");        });    });});

大家都能看明白，我就不多说了，但是这时候呢，IE8还是没法跳转过去，其他浏览器或许是高版本的原因都可以了，我就想了，能不能搞一个alert然后提示一下自动关闭，查了半天，发现完全不可以，效果是可以模拟出来，代码如下(网上有很多，这只是其中一个，这不是重点，重点是它不能达到阻塞效果，我这里只是拿来举例，这是JS加CSS版本的，)：

JS+CSS版本

*{ padding:0; margin:0; font-size:12px;}#bg{background:#000000;opacity: 0.5;-moz-opacity:0.5; filter:alpha(opacity=60); width:100%; height:100%;position:absolute; top:0; left:0}#info{height:0px; width:0px;top:50%; left:50%;position:absolute;  line-height:1.7}#center{background:#fff;border:1px solid #217AC1; width:300px; height:100px; position:absolute; margin:-50px -150px;}#center strong{ display:block; padding:2px 5px; background:#EBF4FC; color:#519FEE;}#center p{padding:10px; text-align:center; color:#1C6FB8;}</style></head><body><span id="boxs"></span><script>function boxs(v){ window.scrollTo(0,0); var bo = document.getElementsByTagName('body')[0]; var ht = document.getElementsByTagName('html')[0]; var boht = document.getElementById('boxs');     boht.innerHTML = ''; bo.style.height='auto'; bo.style.overflow='auto'; ht.style.height='auto';  if(v == 1){     bo.style.height='100%';  bo.style.overflow='hidden';  ht.style.height='100%';    boht.innerHTML = '<div id="bg"></div><div id="info"><div id="center"><strong>信息提示：</strong><p><a href="javascript:boxs(0);">关了我吧！</a></p></div></div>';    }} boxs(1);</script><a href="javascript:boxs(1);">点这里弹出</a>

模态窗口版本

window.showModalDialog('xxx.html');

这个是模态窗口，能达到效果，但是很丑，几乎不可能运用到实际项目当中，于是另一个想法

三、JS函数劫持

举例如下：

var _alert = alert;
window.alert = function(s) {
    if (confirm("是否要弹窗，\"" + s + "\"？")) {
        _alert(s);
    }
}

参见：浅谈javascript函数劫持

大概意思就是我们以前说的重写，覆盖啊，重构啊，什么的，通过这种方法能不能实现阻塞浏览器，然后再自动关闭呢，我试了几次，没成功，不知道有高手能解决不

四、模态窗口，函数回调

（未完待续...）

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。