|
几乎每个人学习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的解释也不统一，这时候查了些资料发现这么一段代码（感谢作者，虽然我不知道原作者是谁）：
使用方法如下： 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; 参见：浅谈javascript函数劫持大概意思就是我们以前说的重写，覆盖啊，重构啊，什么的，通过这种方法能不能实现阻塞浏览器，然后再自动关闭呢，我试了几次，没成功，不知道有高手能解决不 四、模态窗口，函数回调（未完待续...） |
|
|
来自： oospace > 《javascript》
