前言所有人都知道，localStorage和sessionStorage的最大区别是生命周期，一个永久，一个仅针对一个会话期间有效。那么，到底什么是一个会话？多个标签页之间的数据是否会共享呢？ 后台的session我们对会话session的认识一般都是从后台的session开始的，比如Java的session，它是基于往cookie写入一个JSESSIONID来实现的，所以，只要你不是打开一个隐... 阅读全文
老生常谈的问题，虽然有些不太常用，但还是总结一下。 图片法这种方法利用了图片没有跨域限制的特点，仅适用于不需要获取服务端响应的场景，如日志统计等，且只能以GET方式请求，一般很少用。 var img = new Image();img.src = 'http://other.domain.com/log.png'; JSONPXmlHttpRequest有跨域限制，但是script标签没有，... 阅读全文
前言作为一个前端程序员，难免会有一些专属自己的小扩展，没必要每一个都发到Chrome应用商店去，虽然可以勾选“开发者模式”来运行本地插件，但是每次启动都会有一个烦人的“请停用以开发者模式运行的扩展程序”提示，这个提示有多烦人，接触过的人都知道，启动的时候它不立即提示，等过了几秒钟等你打开某个网页开始执行某些操作时它突然弹出来干扰你的操作，真是苦不堪言！所以总想着如何把它给去掉。 解决方法网上... 阅读全文
正文前端先假设有如下setCookie方法： function setCookie(name, value, day, path, domain){ day = day || 30; path = path || '/'; var str = name + '=' + value + '; '; if(day) str += 'expires=' + new Date(D... 阅读全文
概况之前有个疑问：假如某个页面地址和接口地址是跨域的，直接请求肯定无法正确携带和设置cookie，但是如果通过nginx或者fiddler进行一层转发使之变成同域呢？ 下面我们来验证。 假设接口原地址是：http://a.com/test.json ，且设置了允许跨域，现在我在 http://b.com/index.html 下请求这个接口，很显然，可以调用成功，但是携带的是 http://a... 阅读全文
概述完全是无意中发现的，因为这个劫持并没有出现广告。 访问 http://demo.liuxianan.com 时，控制台竟然发现一个奇怪的地址：http://gxtj01.statis.wayayaya.com:5001/gxtj01.php 最后发现被劫持的竟然是CNZZ的一个js文件，用电脑访问如下地址： http://c.cnzz.com/core.php?web_id=125713... 阅读全文
概述一个网页可以通过适当增加子域名个数来突破浏览器单个域名下资源下载的并发连接限制，但是子域名用的太多也不好，因为DNS解析会消耗一定时间，可以通过DNS预解析来让浏览器提前解析DNS以达到加快资源加载速度，从而加快页面显示。 正文通过在meta中增加相关标签来实现这个功能： <meta http-equiv="x-dns-prefetch-control" content="on" /... 阅读全文
关于跨域前言做前端的经常会接触一个名词：跨域，那何为跨域？为什么要跨域？ 同源策略出于安全考虑，浏览器会限制脚本中发起的跨域请求，比如，使用 XMLHttpRequest 对象发起 HTTP 请求就必须遵守同源策略。 具体而言，默认情况下Web 应用程序能且只能使用 XMLHttpRequest 对象向其加载的源域名发起 HTTP 请求，而不能向任何其它域名发起请求。 跨域只要protocol... 阅读全文
JS框架 jQuerydojozeptojqMobi(appframework) CSS框架 bootstrapuikitAmaze UIpureRatchetFramework7 PC上的UI框架 extjsjquery UIjquery easyUIjquery miniuidwzYUI淘宝kissy淘宝SUIKendo UI蚂蚁金服出品的antd 移动UI框架 muiino... 阅读全文
前言这个问题无论是实际项目还是面试都是经常碰到的，所以非常有必要总结一下。 下面分别从几个大的方面去分析一下前端性能优化，有些优化其实效果并不一定非常明显，但还是有必要知道。 减少HTTP请求尽可能减少加载一个页面需要引用的资源个数，因为每一次HTTP请求都是客户端与服务端的一次重连，都是一笔不小的开销，可以采取的措施包括： 使用精灵图CSS Sprites，又叫雪碧图，将页面中多个小图合并... 阅读全文
前言曾几何时，项目中有碰到视频比例拉伸的需求，但是发现这个看似再普通不过的一个需求，找遍全网至今都没有找到解决方法。因为强制给video标签设置width和height的话只会将video的显示区域拉伸，但是里面的视频还是保持原始比例，怎么调都没用： 因为当我横向拉伸时： 当我纵向拉伸时： 2016-09-21 11:15:40 更新： 感谢 @RileyRen 提醒，原来还有ob... 阅读全文
缘由最近在弄仿w3school的在线代码提交功能：http://www.w3school.com.cn/tiy/t.asp?f=jquery_hide 发现自己在做的时候，当提交的代码包含script时浏览器总数提示如下错误： The XSS Auditor refused to execute a script in ‘http://localhost:8080/base/blog/pr... 阅读全文
什么是网站地图网站地图，又叫站点地图，它就是一个列出了你网站上所有页面地址的清单文件，一般来说分为2种，一种是给搜索引擎看的，一种是给用户看的，前者帮助搜索引擎更好地收录你的网站，后者帮助用户更好的了解你的网站整体结构、更快的找到他们想要找的内容。本文讲的主要是前者。 站点地图格式一般有3种格式，txt、xml、html，绝大部分情况下都是用xml格式，百度、谷歌都是支持xml格式。下面简单介绍... 阅读全文
介绍这个编辑器还是挺不错的，功能强大，界面也美观，就是感觉有一点小bug。 主界面如下： github地址：https://github.com/duopixel/Method-Draw 官网演示地址：http://editor.method.ac/ 我在自己服务器上搭建了一个版本，应该比国外服务器的稍微好点： http://svg.liuxianan.com/ ... 阅读全文
marqueemarquee是已经废弃、过时的标签，不推荐使用！在Chrome不同版本中有很多bug，如，Chrome45.0中动画执行完总是需要点一下页面才能继续，最新版的Chrome52.0则没有这个问题。 虽然已经过时，有时候还是不得已用到，这里简单对几个属性做一下介绍。 behavior可用的值为scroll(滚动)、slide(滑动)、alternate(改变，类似于光学的反射路径)... 阅读全文
unicode字符的不同表示法unicode字符在html、css和js中的表示方法均不相同，下面分别作介绍。 css表示法首先来一段很常见的bootstrap的字体图标代码： .glyphicon-home:before { content: "\e021";} 上面代码中的e021就是这个字符的unicode码，是16进制。 语法： '\ + 16进制的unicode编码'如：... 阅读全文
原文发表于2014-07-17 语法element {cursor: url('cur图片的绝对路径'), 图片不存在时的默认鼠标样式;} 说明： 必须是绝对路径；默认样式必须写，如auto、default，中间分隔的是逗号不是空格，否则不会生效；图片最好是.cur后缀的，其它格式不敢保证多浏览器支持；cur图片制作：百度cur 制作会出来一个在线制作工具； 示例<style t... 阅读全文
flash跨域设置默认情况下不允许跨域，需要跨域的话，必须在域名根目录下放置一个名为crossdomain.xml的文件，作用是定义该域名下面的xml文件、json文件、m3u8文件是否允许其它网站的flashplayer来访问。这个文件是格式是由adobe公司制定的： <?xml version="1.0" encoding="utf-8"?><cross-domain-po... 阅读全文
什么是mime-type简单来讲，它的作用就是服务器告诉浏览器你这个内容到底是个什么东东，是一张网页？还是一张图片？还是一个视频？浏览器只有知道了你这是个什么东西，才能正确处理它，mime就是这个东西，服务器通过Content-Type这个header来指定mime。 将xml转换成markdown表格代码由于这里的内容是从tomcat/conf/web.xml中提取的，原始内容是xml格式，这... 阅读全文
如题我们以checkbox复选框传值到后台处理为例。 假如有如下代码，页面有4个name均为pcode的复选框： <form id="edit_form" class="form-horizontal" method="post" > <div class="checkbox"> <label><input type="checkb... 阅读全文