[经验][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,以 下是IE的一个例子:
<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来判断加载的完成。
[经验][JS]如何观察网站,进而模仿的更多相关文章
- Restive.js – 轻松让网站变成响应式和自适应
Restive.js 是一个 jQuery 插件,可以帮助您轻松快捷地添加响应式功能到你网站,适应几乎所有拥有 Web 功能的设备.使用设备检测,高级管理断点,以及方向管理的组合,Restive.js ...
- Sequence.js - 适合电子商务网站的图片滑块
Sequence.js 是一个非常现代的图片滑动效果,特别适合电子商务网站或者企业产品展示功能.带有图片缩率图,能够呈现全屏图片浏览效果.结合 CSS3 Transition 实现响应式的滑块效果. ...
- Nodejs学习笔记(十五)--- Node.js + Koa2 构建网站简单示例
目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装项目其它需要包 清除冗余文件并重新规划项目目录 配置文件 规划示例路由,并新建相关文件 实现数据访问和业务逻辑相关方法 编写mys ...
- [转]Nodejs学习笔记(十五)--- Node.js + Koa2 构建网站简单示例
本文转自:https://www.cnblogs.com/zhongweiv/p/nodejs_koa2_webapp.html 目录 前言 搭建项目及其它准备工作 创建数据库 创建Koa2项目 安装 ...
- Nodejs学习笔记(十五)—Node.js + Koa2 构建网站简单示例
前言 前面一有写到一篇Node.js+Express构建网站简单示例:http://www.cnblogs.com/zhongweiv/p/nodejs_express_webapp.html 这篇还 ...
- Angular JS + Express JS入门搭建网站
3月份开始,接到了新的任务,跟UI开发有关,用的是Angular JS,Express JS等技术.于是周末顺便学习下新技术. 组里产品UI架构如下: 其中前端,主要使用Angular JS框架,另外 ...
- [JS,NodeJs]个人网站效果代码集合
上次发的个人网站效果代码集合: 代码集合: 1.彩色文字墙[鼠标涟漪痕迹] 2.彩色旋转圆环 [模仿http://www.moma.org/interactives/exhibitions/2012/ ...
- 利用JS实现购物网站商品放大镜效果
大家几乎都有在网上购物的经验,有的网站会有一个商品放大镜功能, 就是把鼠标移到图片上的时候,旁边会有另外一张大的图片展示,等同于 放大镜效果,那这样的效果怎样实现的呢,我把代码发给大家,请大家参考. ...
- JS 劫持来源网站并做指定跳转
有时候给网站做流量,免不了要做一些网站劫持的JS跳转,这里贴上一段劫持来源网站的JS跳转方法,很简单 <script> // 获取来源网站 var slyar = document.ref ...
随机推荐
- hybrid开发设计
hybrid方案背景 大部分业务都是在不停改变的,我们希望native不发布新版本就可以让线上用户使用新功能.我们要实现这样的方式,采用h5来实现就可以满足这一要求,准确说是native里提供一个装载 ...
- undefined reference to `_imp___ZN8QWebViewC1EP7QWidget'
add this line to your .pro file: QT += webkitwidgets
- 动态密码卡TOTP算法
TOTP NET实现:http://googleauthcsharp.codeplex.com/ 引用:http://www.cnblogs.com/wangxin201492/p/5030943.h ...
- Delphi 10.1 Berlin Starter Edition
Delphi 10.1 Berlin Starter Edition Embarcadero® Delphi 10.1 Berlin Starter is a great way to get sta ...
- transactional replication 的immediate_sync属性
在默认情况下,immediate_sync是关闭的,这个属性可以在创建publication时指定,也可以在创建完毕后修改. 如果immediate_sync为true, snapshot 文件和re ...
- Shader的语法
Shader "name" { [Properties] Subshaders [Fallback] }(1)Properties:{ Property [Property ... ...
- SharePoint 2013中的默认爬网文件扩展名和分析文件类型
摘要:了解默认情况下 SharePoint 2013 爬网的文件扩展名及其解析的文件类型,可以借此了解搜索可以爬的文件和支持的功能. 如果“管理文件类型”页上的列表包含文件扩展名,爬网组件将仅爬网文件 ...
- 三元组表压缩存储稀疏矩阵实现稀疏矩阵的快速转置(Java语言描述)
三元组表压缩存储稀疏矩阵实现稀疏矩阵的快速转置(Java语言描述) 用经典矩阵转置算法和普通的三元组矩阵转置在时间复杂度上都是不乐观的.快速转置算法在增加适当存储空间后实现快速转置具体原理见代码注释部 ...
- CentOS6.5菜鸟之旅:安装ATI显卡驱动
一.前言 自从安装了CentOS,我的显卡就没消停过,一直在彪高温而且噪音特别大,于是决定上网搜索解决办法.下面记录下来以供日后查阅. 二.安装fglrx driver(ATI/AMD 显卡的linu ...
- [阅读]个人阅读作业week7
People-oriented in Agile People-oriented in Agile One Leader Prepare Good ideas from users People-or ...