js跨域 -- 使用form表单 + 隐藏的iframe


将form表单提交到目标服务器(action=“url”),当表单提交后,页面会target到隐藏的iframe,
实现不需刷新页面跨域。


1. 创建一个iframe
    try{// IE6, IE7
        iframe = document.createElement('<iframe name="{iframeName}">');
    } catch(e) {
        iframe = document.createElement('iframe');
        iframe.name = {iframeName};
    }
    iframe.style.display = 'none';
    document.body.appendChild(iframe);
    
    /** 备注 **/
        1. 在IE下,当使用js创建iframe时,IE不会创建iframe的name,即:iframe.name={iframeName}不会被执行。
        2. 参考:http://terminalapp.net/submitting-a-form-with-target-set-to-a-script-generated-iframe-on-ie/
    /** 备注 **/


2. 监听iframe的onload事件
    if(iframe.readyState){
        iframe.onreadystatechange = function(){
            if (iframe.readyState && iframe.readyState=='complete'){
                callbackFunction.apply(this);
            }
        }.bind(this);
    } else {
        iframe.onload = callbackFunction.bind(this);
    }
    
    /** 备注 **/
        1. iframe事件监听  
        2. 参考:http://hqlong.com/2009/02/620.html
    /** 备注 **/
 
3. 创建表单,并自动提交
    form = document.createElement('form');
    form.action = {url};
    form.target = {iframeName};     // important!!
    form.method = 'post';
    
    input = document.createElement('input');
    input.name = {inputName};
    input.value = {inputValue};
    input.type = 'hidden';
    form.appendChild(input);
    
    document.body.appendChild(form);
    form.submit();
    
    /** 备注 **/
        1. form.target 必须要与iframe.name相同;当表单提交后,页面会target到隐藏的iframe,并且不刷新页面,实现跨域。
        2. form表单必须要append到页面上,否则不能使用js提交(chrome除外)。
        3. 参考:http://terminalapp.net/submitting-a-form-with-target-set-to-a-script-generated-iframe-on-ie/
    /** 备注 **/
    
4. callbackFunction 获取iframe的内容
    iframeContent = iframe.contentDocument? iframe.contentDocument: iframe.contentWindow.document;


5. php的返回值
    "<!DOCTYPE html>
    <html>
        <body>
        <script>document.domain="xxxx.com";</script><script type="text/json-result">'.json_encode($result).'</script>
        </body>
    </html>"
    /** 备注 **/
        1. 在IE下,必须要是完整的html页面才能找到document对象
        2. 返回的结果,要加入document.domain,确保可以跨域访问
        3. 返回的结果放到script标签中,标签可以采用特殊的type标注,以便在js中获取结果
        4. js中获得的json是string,可以通过evalJSON()将其转为json数据
    /** 备注 **/


6. 参考
http://terminalapp.net/submitting-a-form-with-target-set-to-a-script-generated-iframe-on-ie/
http://hqlong.com/2009/02/620.html
http://hi.baidu.com/gguoyu/item/aa501b0ed6a0fb8e03ce1b66
http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值