详谈Iframe自适应高度实现方法及原理(1/3)

同域、子页面高度不会动态增加
这种情况最简单，直接通过脚本获取字页面实际高度，修改iframe元素高度即可。但有二点必须注意：

如果页面内有绝对定位或者没有清浮动的元素，情况有些复杂，不同浏览器处理结果不同，甚至包括webkit内核的浏览器，具体请看这个demo。所以你要么进行浏览器检测，要么用math.max计算一个最大值，要么你想别的方法。
iframe所包含页面可能非常大，需要很长的加载时间，为此直接计算高度的时候，很可能页面还没下载完，高度计算就会有问题。所以最好在iframe的onload事件中计算高度。这里还要注意的是，ie下必须使用微软事件模型obj.attachevent来绑定onload事件。而别的浏览器直接obj.onload = function(){}也可以。

(function(){
    var frame = document.getelementbyid("frame_content_parent"),
        setiframeheight = function(){
            var framecontent = frame.contentwindow.document,
                frameheight = math.max(framecontent.body.scrollheight,framecontent.documentelement.scrollheight);

            frame.height = frameheight;
        };
    if(frame.addeventlistener){
        frame.addeventlistener("load",setiframeheight,false);
    }else{
        frame.attachevent("onload",setiframeheight);
    }
})();

10种跨域资源共享的方式与实现原理
跨域的方法很多，不同的应用场景我们都可以找到一个最合适的解决方案。比如单向的数据请求，我们应该优先选择jsonp或者window.name，双向通信我们采取cross frame，在未与数据提供方没有达成通信协议的情况下我们也可以用server proxy的方式来抓取数据。

同源策略
在客户端编程语言中，如网页特效和actionscript，同源策略是一个很重要的安全理念，它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的，一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域，什么叫不同的域呢？当两个域具有相同的协议(如http), 相同的端口(如80)，相同的host（如www.111cn.net)，那么我们就可以认为它们是相同的域。比如http://www.111cn.net/index.html和http://www.111cn.net/sub/index.html是同域，而http://www.111cn.net, https教程://www.111cn.net, http://www.111cn.net:8080, http://sub.111cn.net中的任何两个都将构成跨域。同源策略还应该对一些特殊情况做处理，比如限制file协议下脚本的访问权限。本地的html文件在浏览器中是通过file协议打开的，如果脚本能通过file协议访问到硬盘上其它任意文件，就会出现安全隐患，目前ie8还有这样的隐患。

受到同源策略的影响，跨域资源共享就会受到制约。但是随着人们的实践和浏览器的进步，目前在跨域请求的技巧上，有很多宝贵经验的沉淀和积累。这里我把跨域资源共享分成两种，一种是单向的数据请求，还有一种是双向的消息通信。接下来我将罗列出常见的一些跨域方式，以下跨域实例的源代码可以从这里获得。

单向跨域
jsonp
jsonp (json with padding)是一个简单高效的跨域方式，html中的script标签可以加载并执行其他域的javascript，于是我们可以通过script标记来动态加载其他域的资源。例如我要从域a的页面pagea加载域b的数据，那么在域b的页面pageb中我以javascript的形式声明pagea需要的数据，然后在pagea中用script标签把pageb加载进来，那么pageb中的脚本就会得以执行。jsonp在此基础上加入了回调函数，pageb加载完之后会执行pagea中定义的函数，所需要的数据会以参数的形式传递给该函数。jsonp易于实现，但是也会存在一些安全隐患，如果第三方的脚本随意地执行，那么它就可以篡改页面内容，截获敏感数据。但是在受信任的双方传递数据，jsonp是非常合适的选择。

flash urlloader
flash有自己的一套安全策略，服务器可以通过crossdomain.xml文件来声明能被哪些域的swf文件访问，swf也可以通过api来确定自身能被哪些域的swf加载。当跨域访问资源时，例如从域www.a.com请求域www.b.com上的数据，我们可以借助flash来发送http请求。首先，修改域www.b.com上的crossdomain.xml(一般存放在根目录，如果没有需要手动创建) ，把www.a.com加入到白名单。其次，通过flash urlloader发送http请求，最后，通过flash api把响应结果传递给javascript。flash urlloader是一种很普遍的跨域解决方案，不过需要支持ios的话，这个方案就无能为力了。

第一步：在toolbar中添加功能按钮

fckconfig.js：fckconfig.toolbarsets[“default”] 中添加按钮名称
fckconfig.toolbarsets["default"] = [
['bold','italic','-','about', 'mydiy']
] ;

第二步：

为按钮添加中文名称和英文名称

zh-cn.js：为你的按钮起个中文名字
mydiy : “我的自定义按钮"

en.js：为你的按钮起个英文名字
mydiy:"mydiybutton"

第三步：在toolbar中显示该按钮

fckeditorcode_gecko.js（fckeditorcode_ie.js）：
查找：

case 'newpage':b=new fcktoolbarbutton('newpage',fcklang.newpage,null,null,true,null,4);break;

在break后插入你的代码

比如case 'mydiy':b=new fcktoolbarbutton('mydiy',fcklang.mydiy,null,null,false,true,50);(这个50是按钮的显示图片，要让你的自定义按钮显示为插入图片那个按钮的图片，可以填入37)
这样就可以在toolbar中显示你的按钮了

第四步：定义按钮功能原型

ckeditorcode_gecko.js（fckeditorcode_ie.js）：

查找：

var fcknewpagecommand=function(){this.name='newpage';};
fcknewpagecommand.prototype.execute=function(){fckundo.saveundostep();fck.sethtml('');fckundo.typing=true;};
fcknewpagecommand.prototype.getstate=function(){return fck_tristate_off;};

定义功能原型：（这里直接复newpage的实现代码放到后面，然后进行修改）

比如：var fckmydiycommand=function(){this.name='mydiy';};fckmydiycommand.prototype.execute=function(){ 这里写你所需要执行的代码或者函数，比如alert("i am here !");};fckmydiycommand.prototype.getstate=function(){return 0;};
将上面代码插入到查找内容之后。

第五步：按钮功能实例化：

ckeditorcode_gecko.js（fckeditorcode_ie.js）：

查找：

case 'newpage':b=new fcknewpagecommand();break;

功能实例化：

case 'mydiy':b=new fckmydiycommand();break;

将上面代码插入到查找内容之后。

ok，这样就可以在为fckeditor加上自定义的按钮了。

如果要为按钮加上快捷键，可以在fckconfig.js中：fckconfig.keystrokes = []加上
[ ctrl + 71 /*g*/, 'mydiy' ],

1.bloom filter

适用范围：可以用来实现数据字典，进行数据的判重，或者集合求交集

基本原理及要点：
对于原理来说很简单，位数组+k个独立hash函数。将hash函数对应的值的位数组置1，查找时如果发现所有hash函数对应位都是1说明存在，很明显这个过程并不保证查找的结果是100%正确的。同时也不支持删除一个已经插入的关键字，因为该关键字对应的位会牵动到其他的关键字。所以一个简单的改进就是 counting bloom filter，用一个counter数组代替位数组，就可以支持删除了。

还有一个比较重要的问题，如何根据输入元素个数n，确定位数组m的大小及hash函数个数。当hash函数个数k=(ln2)*(m/n)时错误率最小。在错误率不大于e的情况下，m 至少要等于n*lg(1/e)才能表示任意n个元素的集合。但m还应该更大些，因为还要保证bit数组里至少一半为0，则m应该>=nlg(1 /e)*lge 大概就是nlg(1/e)1.44倍(lg表示以2为底的对数)。

举个例子我们假设错误率为0.01，则此时m应大概 是n的13倍。这样k大概是8个。

注意这里m与n的单位不同，m是bit为单位，而n则是以元素个数为单位(准确的说是不同元素的个数)。通常单个元素的长度都是有很多bit的。所以使用bloom filter内存上通常都是节省的。

扩展：
bloom filter将集合中的元素映射到位数组中，用k（k为哈希函数个数）个映射位是否全1表示元素在不在这个集合中。counting bloom filter（cbf）将位数组中的每一位扩展为一个counter，从而支持了元素的删除操作。spectral bloom filter（sbf）将其与集合元素的出现次数关联。sbf采用counter中的最小值来近似表示元素的出现频率。

问题实例：给你 a,b两个文件，各存放50亿条url，每条url占用64字节，内存限制是4g，让你找出a,b文件共同的url。如果是三个乃至n个文件呢？

根据这个问题我们来计算下内存的占用，4g=2^32大概是40亿*8大概是340亿，n=50亿，如果按出错率0.01算需要的大概是650亿个bit。现在可用的是340亿，相差并不多，这样可能会使出错率上升些。另外如果这些urlip是一一对应的，就可以转换成ip，则大大简单了。

2.hashing

适用范围：快速查找，删除的基本数据结构，通常需要总数据量可以放入内存

基本原理及要点：
hash函数选 择，针对字符串，整数，排列，具体相应的hash方法。
碰撞处理，一种是open hashing，也称为拉链法；另一种就是closed hashing，也称开地址法，opened addressing。

扩展：
d-left hashing中的d是多个的意思，我们先简化这个问题，看一看2-left hashing。2-left hashing指的是将一个哈希表分成长度相等的两半，分别叫做t1和t2，给t1和t2分别配备一个哈希函数，h1和h2。在存储一个新的key时，同时用两个哈希函数进行计算，得出两个地址h1[key]和h2[key]。这时需要检查t1中的h1[key]位置和t2中的h2[key]位置，哪一个位置已经存储的（有碰撞的）key比较多，然后将新key存储在负载少的位置。如果两边一样多，比如两个位置都为空或者都存储了一个key，就把新key 存储在左边的t1子表中，2-left也由此而来。在查找一个key时，必须进行两次hash，同时查找两个位置。