iframe及与页面之间的通信

获取iframe对象

iframe元素本身是位于父级页面中的，所以你可以像一个普通元素一样的使用和操作它

代表了iframe内容window对象是作为一个页面的属性加入到iframe中的, 为了让父级页面能够以一种合适的方式获取iframe的window对象，父级页面和iframe页面的域名应该保持一致

iframe元素拥有名为contentDocument、parentWindow、contentWindow（全兼容）等属性， 如：

iframeElement.contentWindow || iframeElement.contentDocument.parentWindow
父级页面的window对象在iframe中也能够以window.parent获取

判断 iframe 是否加载完毕的方法（也适用于script加载）

js.onload = js.onreadystatechange = function() {
    if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
        // callback在此处执行
        js.onload = js.onreadystatechange = null;
        ...
    }
};

//为了兼顾事件的一致性，改代码如下：
var iframe = document.createElement("iframe");
iframe.src = "simpleinner.htm";

if (iframe.attachEvent){
    iframe.attachEvent("onload", function(){
        iframeOnload();
    });
} else {
    iframe.onload = function(){
        iframeOnload();
    };
}

document.body.appendChild(iframe);

function iframeOnload() {
    alert("Local iframe is now loaded.");
}

　　

iframe 解决跨域问题

什么是跨域

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象

因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象, 导致了跨域问题

域仅仅是通过”URL的首部”来识别， “URL的首部”指window.location.protocol+window.location.host，也可以理解为”Domains, protocols and ports must match”

方法一： document.domain + iframe

解决主域相同而二级域名不同的情况， 达到两个页面相互通信的目的.

方法二： iframe + location.hash

解决不同域名下的两个页面的通信问题.

由于改变hash并不会导致页面刷新，如:http://a.com#helloword 中的’#helloworld’就是location.hash, 所以可以利用hash来在url中传值

不在同一个域下的两个页面,IE、Chrome不允许修改parent.location.hash的值(Firefox可以修改), 所以需要借助一个iframe作为代理, 修改iframe上url的hash值来达到传递数据的目的, 此时在父级页面上加一个定时器，隔一段时间来获取location.hash值，如果有变化或符合处理的要求, 及关掉间隔执行，如：

先是a.com下的文件cs1.html文件：

page1:父页面
function checkHash() {
    var data = location.hash ? location.hash.substring(1) : '';
    if (data) {
        console.log(data);
        //do something...
    }
}
setInterval(checkHash, 2000);

page2: 子页面
try {
    parent.location.hash = 'somedata';
} catch (e) {
    // ie、chrome的安全机制无法修改parent.location.hash，
    // 所以要利用一个代理iframe
    var ifrproxy = document.createElement('iframe');
    ifrproxy.style.display = 'none';
    ifrproxy.src = page3 + '#somedata';    //page3与父页面在同一个域下
    document.body.appendChild(ifrproxy);
}

page3: 代理iframe页面
//因为parent.parent和自身属于同一个域，所以可以改变其location.hash的值
parent.parent.location.hash = self.location.hash.substring(1);

缺点

方法一：安全性，当一个站点（b.a.com）被攻击后，另一个站点（c.a.com）会引起安全漏洞

方法二：数据直接暴露在了url中，数据容量和类型都有限s

参考

http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html

http://www.nczonline.net/blog/2009/09/15/iframes-onload-and-documentdomain/