[经验][JS]如何观察网站，进而模仿

应该存在着一类人：

1.看到美丽的网站时，就会F12，看看他是怎么实现的

2.看到网站数据是自己需要的时候，就会F12，看看他是怎么拿到数据的

3.看到网站一个有趣的模块时，，就会F12，看看他是怎么制作的

看久了，就知道了大概规律

有时不懂，也会去google，baidu一下

---

观察网站，一般是这样的吧：

1.瞎点点，看看有什么特别的东西吸引你的

2.右击查看元素，或F12,去查看元素Dom节点

3.看看效果展示是，Dom节点的变化

4.看看外链和内部的脚本，如果压缩了，就用解压工具解压后看

5.有的网站脚本很长，需要耐心分解，分析

6.对于数据，用network 页查看他的*，一般会在脚本类型里可以找到数据，也有相应的请求地址，耐心分析一下参数意思即可

7.知道了数据，他的应用很简单

如果是json，先试试可不可以用ajax方法获取，一般跨域不允许，这时只能用服务器去模拟抓取了

如果是script，那就用script标签进行加载，然后用加载完成事件进行后续数据显示操作

8.css方面，F12页面直接看的见

---

跨域请求：

Jquery：

$.getScript(url,success(response,status))

$.getJSON(url,[data],[callback])

---

备注onload事件：（抄来的）

1.script标签：

IE的 script 元素支持onreadystatechange事件，不支持onload事件。

FF的script 元素不支持onreadystatechange事件，只支持onload事件。

如果要在一个<script src="http://xiaogai1010.blog.163.com/blog/xx.js"> 加载完成执行一个操作，FF使用onload事件就行了，IE下则要结合onreadystatechange事件和this.readyState，以 下是ＩＥ的一个例子：

<script type="text/javascript" src="http://xiaogai1010.blog.163.com/blog/xx.js" onreadstatechange="if(this.readyState=='load') alert('loaded');"></script>

this.readyState的值为'loaded'或者'complete'都可以表示这个script已经加载完成．

如何结合IE和FF的区别?参考一下jquery的源码：

var script = document.createElement('script');

script.src="http://xiaogai1010.blog.163.com/blog/xx.js";

script.onload = script.onreadystatechange = function(){

if(  ! this.readyState     //这是FF的判断语句，因为ff下没有readyState这人值，IE的readyState肯定有值

|| this.readyState=='loaded' || this.readyState=='complete'   // 这是IE的判断语句

){

alert('loaded');

}

};

注意：readyState是针对IE浏览器，载入完毕的情况是loaded，缓存的情况下可能会出现readyState为complete。所以两个不能少。

2.iframe标签：

对于用js创建的iframe的加载，一定要在其加载完成之后再进行操作，否则会出现问题
（1）在ie中，判断iframe加载完成，用onreadystatechange,但是IE会执行两次，分别是ifr1.readyState == 'interactive'和
ifr1.readyState == 'complete',所以需要判断 redyState=='complete' ；然后再对iframe进行相关的操作；
（2）但是在标准浏览器以及ie9之后，用onload来判断加载的完成。