我的足迹: 大道至简,代码如诗。
  • 也谈iframe高度自适应

    2011-12-02

    先描述下我在最近项目中遇到这个问题的场景。

    我们的项目是对某款产品的评测,网页下半部分是用户关于这个产品的微博讨论,评论等等,后台开发同事决定将这部分内容全部放在一个iframe里,通过传入不同的产品ID参数就可以在整个项目中共用这部分代码,但这个内嵌框架里的内容全部是动态加载,并且高度不能确定,这就引出了下边要说的iframe高度自适应问题。

    主页面iframe代码:

    <iframe width="100%" scrolling="no"  frameborder="0" src="http://www.abc.com/content.htm" id="ifr_cmnt"></iframe>

    iframe内部代码:

    <body>
        <div id="wrap">
        <!--页面其它内容-->
        </div>
    </body>

    JS控制iframe高度自适应方法:
    方法一:JQuery选择器。仅在主页面中使用下列代码,这也是代码量最小的一种方法。

        document.domain="sina.com.cn";
        jQuery("#ifr_cmnt").load(function(){
            var set_height = jQuery(this).contents().find("#wrap").height();
            jQuery(this).height(set_height);
        });

    方法二:hash传值。
    主页面代码:

            document.domain="sina.com.cn";
            jQuery("#ifr_cmnt").load(function(){
                var temp_height = window.frames['ifr_cmnt'].location.hash;
                var set_height = parseInt(temp_height.slice(temp_height.lastIndexOf("#")+1));
                jQuery(this).height(set_height);
            });

    内嵌页面代码:

            var ifr_height = jQuery("#wrap").height();
            document.location.href+=("#"+ifr_height);

    方法三:传统JavaScript。
    主页面代码:

            document.domain = "sina.com.cn";
            jQuery("#ifr_cmnt").load(function(){
                var set_height = document.getElementById("ifr_cmnt").contentWindow.document.body.scrollHeight;
                document.getElementById("ifr_cmnt").height = set_height;
            });

    内嵌页面代码:

            var ifr_height = jQuery("#wrap").height();
            parent.document.getElementById("ifr_cmnt").height = ifr_height;

    整个过程需要注意几个细节:

    a、当页面中包含来自其他子域的框架或内嵌框架时,通过设置document.domain来实现页面间的JavaScript通信。

    b、因为浏览器在渲染页面时存在一些差异,比如内嵌页面中有异步加载的数据块,在IE中,首次渲染不会考虑异步加载内容是否成功,导致数据加载完成后iframe区域由于内容高度增加出现滚动条,在Firefox和Chrome等现代浏览器中不会出现这个问题。

    作者:Fenix | 分类目录:前端开发 | 标签:
  • 悟透JavaScript(转)

    2011-02-23

    引子

    编程世界里只存在两种基本元素,一个是数据,一个是代码。编程世界就是在数据和代码千丝万缕的纠缠中呈现出无限的生机和活力。

    数据天生就是文静的,总想保持自己固有的本色;而代码却天生活泼,总想改变这个世界。

    你看,数据代码间的关系与物质能量间的关系有着惊人的相似。数据也是有惯性的,如果没有代码来施加外力,她总保持自己原来的状态。而代码就象能量,他存在的唯一目的,就是要努力改变数据原来的状态。在代码改变数据的同时,也会因为数据的抗拒而反过来影响或改变代码原有的趋势。甚至在某些情况下,数据可以转变为代码,而代码却又有可能被转变为数据,或许还存在一个类似E=MC2形式的数码转换方程呢。然而,就是在数据和代码间这种即矛盾又统一的运转中,总能体现出计算机世界的规律,这些规律正是我们编写的程序逻辑。

    不过,由于不同程序员有着不同的世界观,这些数据和代码看起来也就不尽相同。于是,不同世界观的程序员们运用各自的方法论,推动着编程世界的进化和发展。

    众所周知,当今最流行的编程思想莫过于面向对象编程的思想。为什么面向对象的思想能迅速风靡编程世界呢?因为面向对象的思想首次把数据和代码结合成统一体,并以一个简单的对象概念呈现给编程者。这一下子就将原来那些杂乱的算法与子程序,以及纠缠不清的复杂数据结构,划分成清晰而有序的对象结构,从而理清了数据与代码在我们心中那团乱麻般的结。我们又可以有一个更清晰的思维,在另一个思想高度上去探索更加浩瀚的编程世界了。

    在五祖弘忍讲授完《对象真经》之后的一天,他对众弟子们说:“经已讲完,想必尔等应该有所感悟,请各自写个偈子来看”。大弟子神秀是被大家公认为悟性最高的师兄,他的偈子写道:“身是对象树,心如类般明。朝朝勤拂拭,莫让惹尘埃!”。此偈一出,立即引起师兄弟们的轰动,大家都说写得太好了。只有火头僧慧能看后,轻轻地叹了口气,又随手在墙上写道:“对象本无根,类型亦无形。本来无一物,何处惹尘埃?”。然后摇了摇头,扬长而去。大家看了慧能的偈子都说:“写的什么乱七八糟的啊,看不懂”。师父弘忍看了神秀的诗偈也点头称赞,再看慧能的诗偈之后默然摇头。就在当天夜里,弘忍却悄悄把慧能叫到自己的禅房,将珍藏多年的软件真经传授于他,然后让他趁着月色连夜逃走…

    后来,慧能果然不负师父厚望,在南方开创了禅宗另一个广阔的天空。而慧能当年带走的软件真经中就有一本是《JavaScript真经》!

    回归简单

    要理解JavaScript,你得首先放下对象和类的概念,回到数据和代码的本原。前面说过,编程世界只有数据和代码两种基本元素,而这两种元素又有着纠缠不清的关系。JavaScript就是把数据和代码都简化到最原始的程度。

    JavaScript中的数据很简洁的。简单数据只有 undefined, null, boolean, number和string这五种,而复杂数据只有一种,即object。这就好比中国古典的朴素唯物思想,把世界最基本的元素归为金木水火土,其他复杂的物质都是由这五种基本元素组成。

    JavaScript中的代码只体现为一种形式,就是function。

    注意:以上单词都是小写的,不要和Number, String, Object, Function等JavaScript内置函数混淆了。要知道,JavaScript语言是区分大小写的呀!

    任何一个JavaScript的标识、常量、变量和参数都只是unfined, null, bool, number, string, object 和 function类型中的一种,也就typeof返回值表明的类型。除此之外没有其他类型了。

    先说说简单数据类型吧。

    undefined:   代表一切未知的事物,啥都没有,无法想象,代码也就更无法去处理了。
    注意:typeof(undefined) 返回也是 undefined。
    可以将undefined赋值给任何变量或属性,但并不意味了清除了该变量,反而会因此多了一个属性。

    null:            有那么一个概念,但没有东西。无中似有,有中还无。虽难以想象,但已经可以用代码来处理了。
    注意:typeof(null)返回object,但null并非object,具有null值的变量也并非object。

    boolean:      是就是,非就非,没有疑义。对就对,错就错,绝对明确。既能被代码处理,也可以控制代码的流程。

    number:      线性的事物,大小和次序分明,多而不乱。便于代码进行批量处理,也控制代码的迭代和循环等。
    注意:typeof(NaN)和typeof(Infinity)都返回number 。
    NaN参与任何数值计算的结构都是NaN,而且 NaN != NaN 。
    Infinity / Infinity = NaN 。

    string:         面向人类的理性事物,而不是机器信号。人机信息沟通,代码据此理解人的意图等等,都靠它了。

    简单类型都不是对象,JavaScript没有将对象化的能力赋予这些简单类型。直接被赋予简单类型常量值的标识符、变量和参数都不是一个对象。

    所谓“对象化”,就是可以将数据和代码组织成复杂结构的能力。JavaScript中只有object类型和function类型提供了对象化的能力。

    没有类

    object就是对象的类型。在JavaScript中不管多么复杂的数据和代码,都可以组织成object形式的对象。

    但JavaScript却没有 “类”的概念!

    对于许多面向对象的程序员来说,这恐怕是JavaScript中最难以理解的地方。是啊,几乎任何讲面向对象的书中,第一个要讲的就是“类”的概念,这可是面向对象的支柱。这突然没有了“类”,我们就象一下子没了精神支柱,感到六神无主。看来,要放下对象和类,达到“对象本无根,类型亦无形”的境界确实是件不容易的事情啊。

    Read More »

    作者:Fenix | 分类目录:前端开发 | 标签:
  • CSS经典布局实例演示之单行单列

    2010-11-27

    最近一直在钻研CSS,并受Owen Briggs启发,决定将自己这段时间CSS学习心得记录下来,请单击图标查看demo。(本系列文章排版暂只兼容标准浏览器,请使用Chrome,Firefox等浏览)

    1、固定宽度,使用float浮在左上角
    #content {
        float: left;
        display:inline;/*消除IE6双倍边距*/
        margin:20px;
    }
    2、固定宽度,使用绝对(absolute)定位,固定在左上角
    #content {
        position: absolute;
        top: 20px;
        left: 20px;
    }
    3、不固定宽度,采用百分比(%)定义宽度来自适应页面,固定在左上角
    #content {
        position: absolute;
        top: 0px;
        left: 0px;
        margin: 20px;
        width: 74%;
    }
    4、固定宽度,采用在body样式中定义居中属性(text-align: center;)实现适应页面自动居中
    #content {
        width: 600px;
        margin:20px auto;
    }

    点评:单行单列在实际项目中并不常见,第4种居中经常与其它布局方式共存在实际项目中。关于居中,通常有三种方法来实现,一是本例中用到的text-align: center;第二种方法定义当前容器的width属性,然后配合margin:20px auto;来实现,第三种方法可以先定义容器宽度如width:720px;接着用position:relative;left:50%;使容器左边缘居中,然后给容器加负边距margin-left:-360px;使整个容器居中。几种方法可以根据实际情况需要和浏览器的兼容情况选择使用。

    作者:Fenix | 分类目录:前端开发 | 标签: