安·记

2012-08-24

js中的iframe操作

在项目整合中相信用到最多的是iframe了，下面整理了相关常用操作，作为笔记！

1. 获得iframe的window对象

存在跨域访问限制。

chrome：iframeElement. contentWindow
firefox： iframeElement.contentWindow
ie6：iframeElement.contentWindow

文章Iframes, onload, and document.domain中说“he iframe element object has a property called contentDocument that contains the iframe’s document object, so you can use the parentWindow property to retrieve the window object.”意思就是一些浏览器可以通过iframeElement.contentDocument.parentWindow获得iframe的window对象。但经过测试firefox、chrome的element.contentDocument对象没有parentWindow属性。

2012-07-23

CSS

HTML5? 你妈贵姓？W3C？还是WHATWG？

目前,这两个组织负责开发HTML已经决定在某种程度的分离,这意味着在未来将有两个版本的HTML5—— snapshot版本和living standard版本。

万维网超文本应用技术工作组(WHATWG)是由万维网联盟(W3C)在未来的HTML推进进度缓慢而成立。当时，大多数用户想留在HTML,只不过想要它需要改进，但是事实上“W3C或多或少地放弃了在HTML而专注于XML和xhtml。

自2004年以来，WHATWG接着负责将HTML标准向前推进。大约在2007年,W3C采用WHATWG的规范并取名为HTML5。这两个组织一直在名义上的共同努力指定HTML5，但是，他们在HTML5的一些方法一直存在分歧。多年来,这两个组织都倾向于更偏向他们的方法,现在这把分歧只是被形式化了。

在一份WHATWG的邮件列表中，一名WHATWG标准的作者解释道：

More recently, the goals of the W3C and the WHATWG on the HTML front have diverged a bit as well. The WHATWG effort is focused on developing the canonical description of HTML and related technologies, meaning fixing bugs as we find them adding new features as they become necessary and viable, and generally tracking implementations. The W3C effort, meanwhile, is now focused on creating a snapshot developed according to the venerable W3C process. This led to the chairs of the W3C HTML working group and myself deciding to split the work into two, with a different person responsible for editing the W3C HTML5, canvas, and microdata specifications than is editing the WHATWG specification.

上面的文字大意就是WHATWG 致力于持续迭代的维护HTML5（Living Standard），W3C还是走自己的老路，维护现在已经成型的标准（snapshot），于是道不同不相为谋，就散伙呗。

如果你认为两者分裂意味着将有两个HTML5版本，看情况是答案八九不离十啊。

W3C打算创建一个独立的标准，就是WHATWG口中的“snapshot”。WHATWG这下就不同意了，所以想想，还是单干吧。目测摆脱了W3C的束缚之后，WHATWG的开发脚步会比以前更快。

总而言之，对于开发者来说，这不像是一个好消息。以后HTML5到底是W3C的版本还是WHATWG的版本估计就再也说不清楚了。我的猜测是Chrome and Firefox会跟随WHATWG的步伐，然后Microsoft（IEs）会按照自己的喜好来耍（这点个人稍微不同意啊，感觉IEs和chrome这种高帅富，都会按照自己的意愿来耍，Firefox就屌丝点，老老实实吧）。

原文地址：http://www.i-programmer.info/news/191-htmlcss/4531-which-html5-whatwg-and-w3c-split.html

2012-06-04

工具

Chrome开发人员工具使用技巧

转自：http://ued.taobao.com/blog/2012/06/03/debug-with-chrome-dev-tool/

这篇文章是根据目前 chrome 稳定版(19.0.1084.52 m)写的, 因为 google 也在不断完善chrome developer tool, 所以 chrome 版本不同可能稍有差别. 一些快捷键也是 windows 上的, mac 下的应该大同小异.

常规的断点相关的 breakpoint/conditional-breakpoint/call-stack/watch-expressions 等就不涉及了.

1. Beautify javascript

js 文件在上线前一般都会压缩下, 压缩的 javascript 几乎没有可读性, 几乎无法设定断点. 在 Scripts 面板下面有个 Pretty print 按钮(这种符号 {}), 点击会将压缩 js 文件格式化缩进规整的文件, 这时候在设定断点可读性就大大提高了.

2012-05-28

未分类

如果有人对你说：“这很简单，不会占用你多少时间。”

原文地址：http://danshipper.com/non-technical-people-cant-estimate-developmen

　　“这个网站非常简单，所有你需要做的就是X，Y，Z。你看起来是技术很不错，所以，我相信，你不需要花费太多时间就能把它搭建起来。”

　　我时不时的就会收到这样的Email。写这些邮件的人几乎都是跟技术不沾边的人，或正在研究他们的第一个产品。起初，当听到人们这样的话，我总是十分的恼怒。他们在跟谁辩论软件开发所需要的时间？但后来我意识到，即使我自己对自己的项目预测要花去多少开发时间，我也是一筹莫展。如果连我自己都做不好，我何必对那些人恼怒呢？

　　真正让我郁闷的不是他们预估的错误。问题在于他们竟然认为自己可以做出正确的估计。作为开发人员，我们经常会发现，在软件开发的问题上，一个外行人会很自然的把复杂的事情估计的很简单。

　　这并不是为我们的愤怒找借口。但这引起了另外一个有趣的问题：为什么我们天生的预测复杂性的能力在遇到编程问题时会失灵？为了回答这个问题，让我们来认识一下我们的大脑如何估计事情的。有些事情对于一些没有经验的人也很容易预估正确，但有些事情则不然。

2012-05-23

CSS

嵌入iframe的页面在IE6下滚动时候出现花屏

和电信合作的一个项目，我们的页面做好了之后，嵌入到对方的iframe里面。这个时候，原本正常的网页，在滚动条滚动的时候出现了花屏的问题。

一步步排查下来，发现是body设置了背景图所导致。解决办法有下面几种：

1、在body中加个div,变成:

<body><div id="main"></div></body>

在div#main里设置背景。

#main{margin:0px;background:url(../images/bg.jpg) repeat-x;}

2、给body背景加了个默认背景颜色。

body{margin:0px;background:url(../images/bg.jpg) repeat-x #fff;}

3、给body样式添加_zoom:1.0001

body{margin:0px;background:url(../images/bg.jpg) repeat-x; _zoom:1.0001;}

2012-05-22

发现

第六版犀牛书：《javascript权威指南》

2012-05-22

javascript

javascript中那些漂亮的诗句。

这些javascript语句是不是令你意想不到呢？我们平时不常用，却是如此简洁优美，当然，在团队合作中请加上注释。

取整同时转成数值型：

'10.567890'|0
//结果: 10
'10.567890'^0
//结果: 10
-2.23456789|0
//结果: -2
~~-2.23456789
//结果: -2

日期转数值：

var d = +new Date();
//结果: 1295698416792

2012-05-16

javascript

jQuery模拟瀑布流布局。

话说这个现在很流行，工作之余写了个简单的，原理是模拟ajax返回的json对象，再构造HTML，计算最小高度的ul列，将其写入，并在滚动条处于底部时触发。

<html>
<head>
    <meta charset="utf-8">
    <title>瀑布流</title>
    <style type="text/css">
        *{margin: 0; padding: 0; }
        body{text-align: center;}
        .content{margin: 0 auto ; text-align: center; width: 960px; overflow: hidden; }
        .content ul{float: left; width: 220px; margin: 5px; padding: 5px;}
        .content ul li{ border: 1px solid #8b4513; list-style: none; overflow: hidden; margin-top: 5px;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var _load = 0;
        function getMmsPicList(){
            _load =1 ;
            var list = {"list":[
                {"pic":"/wp-content/uploads/2012/05/1.jpg","txt":"瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达"},
                {"pic":"/wp-content/uploads/2012/05/2.jpg","txt":"瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达"},
                {"pic":"/wp-content/uploads/2012/05/3.jpg","txt":"瀑布流思密达瀑布流思密达"},
                {"pic":"/wp-content/uploads/2012/05/4.jpg","txt":"瀑布流思密达瀑布流思密达瀑布流思密达"},
                {"pic":"/wp-content/uploads/2012/05/5.jpg","txt":"瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达"},
                {"pic":"/wp-content/uploads/2012/05/6.jpg","txt":"瀑布流思密达"},
                {"pic":"/wp-content/uploads/2012/05/7.jpg","txt":"瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达"},
                {"pic":"/wp-content/uploads/2012/05/8.jpg","txt":"8等哈克h发发s客户方卡斯"},
                {"pic":"/wp-content/uploads/2012/05/9.jpg","txt":"瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达"}
            ]};
            for(i in list.list){
                var pic = list.list[i].pic ;
                var txt = list.list[i].txt ;
                var oUl = $('.content ul') ;
                oUl.sort(function(a,b){
                    return $(a).height()-$(b).height();
                })
                var HTMLstr2 =  '<li>'+
                        '<img src="'+pic+'" alt="">'+
                        '<p>'+txt+'</p>'+
                        '</li>' ;
                $(oUl[0]).append(HTMLstr2);
            }
            _load = 0;
        }
        $(document).ready(function(){
            $(window).scroll(function(){
                var top = $(window).scrollTop() ;
                var winH = $(window).height() ;
                var docH = $(document).height();
                if(docH==(top+winH)){
                    if(_load==0){
                        getMmsPicList();
                    }
                }
            });
        });
    </script>
</head>
<body>
<div class="content">
    <ul class="list1">
        <li><img src="/wp-content/uploads/2012/05/1.jpg" alt=""><p>瀑布流思密达</p></li>
        <li><img src="/wp-content/uploads/2012/05/2.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>
        <li><img src="/wp-content/uploads/2012/05/3.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>
    </ul>
    <ul class="list2">
        <li><img src="/wp-content/uploads/2012/05/4.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>
        <li><img src="/wp-content/uploads/2012/05/5.jpg" alt=""><p>瀑布流思密达</p></li>
        <li><img src="/wp-content/uploads/2012/05/6.jpg" alt=""><p>瀑布流思密达瀑布流思密达</p></li>
    </ul>
    <ul class="list3">
        <li><img src="/wp-content/uploads/2012/05/7.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>
        <li><img src="/wp-content/uploads/2012/05/8.jpg" alt=""><p>瀑布流思密达瀑布流思密达</p></li>
        <li><img src="/wp-content/uploads/2012/05/9.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>
    </ul>
    <ul class="list4">
        <li><img src="/wp-content/uploads/2012/05/1.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>
        <li><img src="/wp-content/uploads/2012/05/5.jpg" alt=""><p>瀑布流思密达</p></li>
        <li><img src="/wp-content/uploads/2012/05/7.jpg" alt=""><p>瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达瀑布流思密达</p></li>
    </ul>
</div>
</body>
</html>

预览DEMO：/wp-content/uploads/2012/05/waterfall.html

2012-05-10

未分类

菲律宾国防部官网被红客攻陷了？大误！！！

今天听说菲律宾官方网站被黑，于是进去看了看。
发现 http://www.pei.net.ph/ 和 http://lam IT an.gov.ph/ 确实被黑了，显示了中国国旗。
　　
疑点1.
　　我们进行了GOOGLE搜索和百度搜索，发现没有任何搜索引擎以前的收录记录，试想一个国家的网站，访问量应该很大，而且从这个网站运作，应该就被搜索引擎收录过，我们发现了上次快照更新时间已经是昨天了。那么，一个国家的机要网站，在发现自己被黑后一天都没人处理，难道他们国家没有技术人员了吗？

2012-05-09

工具