前端奇技淫巧《长期更新》

看了些大神的文章，才发现自己并不是前端菜鸟，而是还没破壳。

最近有时间就会研究一位大神－张鑫旭的网站深受打击，感觉自己弱爆了，看到什么觉得新奇或者有用就简单记录在这里，供以后查阅吧。tips都会留下原文地址，大家有兴趣可以去拜读一下大神的作品。

开始日期：2016年6月30日
更新日期：

---

1. 文字内容溢出用点点点(…)省略号表示

目前项目中用到的是最简单明了（最无脑）的办法：jQuery限制字符字数的方法。

$(document).ready(function(){$(“.test”).each(function(){var maxWidth=23;//限制字符个数if($(this).text().length>maxWidth){$(this).text($(this).text().substring(0,maxWidth);$(this).html($(this).html()+’…’);}});});

使用text-overflow:ellipsis
webkit内核的浏览器，特别是移动端，是可以实现多行文本内容超出点点点…最后一行显示的，典型的CSS组合如下：

.test {    display: -webkit-box;    -webkit-line-clamp: 3;//控制行数的，是3就是显示3行，3行结束点点点    -webkit-box-orient: vertical;    overflow: hidden;}

• 原文参考 这儿

2. div塌陷，overflow”清除浮动”的一些认识

问题：一个div里面仅有个浮动元素（一张图片），那么这个div高度会塌陷。即高度为0px，如下图：

一个div，默认宽度100%显示，一旦有了浮动属性（none除外），其宽度与内部包裹的元素的宽度一致。如下图：

对于absolute绝对定位，即absolute元素（如果没有设置width值），其宽度自适应于内部元素。
＊ps：经验证，position属性为absolute，fixed的时候，都会自适应内部元素高度。

对于inline-block，这个可以说是包裹的祖宗了，无论是float还是absolute的包裹性都是向inline-block靠齐的。

对于，浮动(float)，绝对定位(position:absolute)以及inline-block的包裹性我称之为“主动包裹”，其标签宽度会收缩至内部元素大小；而overflow与zoom，我称之为“被动包裹”。
疑问：既然div高度塌陷，那么div里面的这个图片就应该在div的外部，按照overflow:hidden的功能，这个图片应该直接-“咔”-一声完全被截掉而不显示的？
但是这可以吗，显然不行，怎么办，只能去包裹这个浮动的美女图片，于是设置了overflow:hidden属性的div有了高度，区别于“主动包裹”，div的长度不变！同时把浮动的图片封在了里面。如下图：

＊ps：IE浏览器支持的zoom:1（指的就是原大小显示）也可以清除内部元素浮动造成的影响。与overflow效果相似：宽度包裹，长度不变。

• 原文参考 这儿

3. display:table-cell的应用

display:table-cell属性简述：
display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的。单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以display:table-cell还是有不少潜在的使用价值的（IE6/7不支持此属性）
与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了。

display:table-cell特性应用：
1⃣️display:table-cell与两栏自适应布局
如下图：其中a标签使用了float：left属性，使a标签自适应内部img的高度，还实现了左浮动的效果。

.content{display:table-cell; *display:inline-block;}

去掉“display:table-cell”效果如下：

对比两图可以看出，父元素添加“display:table-cell”属性后，其同列子节点保持相同的宽度，类似于表格效果。

2⃣️display:table-cell与等高布局
table表格中的单元格最大的特点之一就是同一行列表元素都等高。所以，很多时候，我们需要等高布局的时候，就可以借助display:table-cell属性。说到table-cell的布局，不得不说一下“匿名表格元素创建规则”：

CSS2.1表格模型中的元素，可能不会全部包含在除HTML之外的文档语言中。这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table对象，使其符合table/inline-table、table-row、table- cell的三层嵌套关系。

举个例子吧，如果我们为元素使用“display:table-cell;”属性，而不将其父容器设置为“display:table-row;”属性，浏览器会默认创建出一个表格行，就好像文档中真的存在一个被声明的表格行一样，考虑到匿名创建表格元素的问题，所有table-cell元素外最好留有一个用来包裹的标签。效果如下图：

.list_row{display:table-row;}.list_cell{display:table-cell; width:30%;padding: 20px;}.list_center{background-color:#f0f3f9;}

如上使用“width:30%”等宽，配合“display:table-cell”等高，可实现等高等宽布局应用。

• 原文参考 这儿

4. HTML5 history pushState的应用

背景：今天做项目，页面中用到了iframe结构，客户需求是左侧导航栏保持不变，点击的时候请求服务器，将其返回的HTML加载到iframe中，在不刷新页面的情况下改变页面的URL及Title为相应iframe中的数据。

更换页面的URL很简单：Chorome下打开Console，键入window.top.location可以得到页面相应的链接信息如下：

能得到当然也能修改咯：window.top.location.href = "http://www.zhangxinxu.com"
效果如下：

结果是既修改了页面URL，又刷新了页面，显示了新URL的页面。

但是有的时候囊，我们是希望有改变URL的地址但是又不希望有页面刷新的效果，比如上述客户的要求，也不能说是过分。
众所周知Ajax可以实现页面的无刷新操作——优点；但是，也会造成另外的问题：无法前进与后退！
先不说iframe用在这里合不合适（个人觉得ajax更好），本来iframe就是实现A页面中嵌套B页面的效果，URL并没有变化。

URL没有变化是因为这个跳转是在服务器内部跳转的。
浏览器的工作原理。浏览器发出一个地址请求到服务器，服务器根据这个地址找到相应的页面资料返回给浏览器，最后浏览器将信息显示给用户。
但服务器内部跳转的时候，对浏览器来说是不知道的，它只负责把服务器返回的信息显示出来。

此时想实现更新URL且不刷新页面的效果，就要用到H5中的新方法：

window.history.pushState(｛state｝,"title", "url")

pushState() 带有三个参数：一个状态对象，一个标题（好像无效了），以及一个可选的URL地址。
state：与要跳转到的URL对应的状态信息，是个对象，可以传null 或者｛｝。

state对象是一个JavaScript对象，它关系到由pushState()方法创建出来的新的history实体。用以存储关于你所要插入到历史
记录的条目的相关信息。State对象可以是任何Json字符串。因为firefox会使用用户的硬盘来存取state对象，这个对象的最大存储空间为640k。如果大于这个数
值，则pushState()方法会抛出一个异常。如果确实需要更多的空间来存储，请使用本地存储。

title：不知道干啥用，赋值也不起任何卵用，だから传空字符串就行了。
url：这个参数提供了新历史纪录的地址，新的URL不一定要是绝对地址，如果它是相对的，它一定是相对于当前的URL。新URL必须和当前URL在同一个源下，否则，pushState() 将丢出异常。（也就是经常说的不能跨域请求？）这个参数可选，如果它没有被特别标注，会被设置为文档的当前URL。

那么现在怎么实现上述不刷新页面情况下改变地址跟页面title囊？直接上代码：

document.title = newTitle;//手动改变页面titlehistory.pushState({ title: newTitle }, newTitle, newURL);//不刷新页面情况下改变地址

大婶的栗子点 这儿
通过history对象操纵浏览器历史记录参考 这儿
据说大家都喜欢图文并茂，下图是用来布局的。

项目中还涉及到获取iframe中加载的HTML的title的问题，实现方式如下：
1）：window.frames[“iframe的name值”].document.title;
2）：document.getElementById(“iframe的name”).contentWindow.document.title;
3）：$(“#iframe的ID”).contents().attr(“title”);//jquery 方法

iframe常用方法：
1）：onload 在浏览器完成对象的装载后立即触发。
2）：onreadystatechange 当对象状态变更时触发。
每当iframe加载页面，过程内会激活onreadystatechange事件三次，相应的状态分别是loading，interactive和complete，而最后一次才是complete。状态存放在属性readyState中：获取对象的当前状态。
iframe用法的详细讲解参考 这儿

• 原文参考 这儿

---