只要是好东西,都应该主动分享出来,让大家都用起来;鼓励开源,大家一起,为积累更多更好的东西而奋斗!

前端跨域代理(proxy)

iframe:src([args][,fun][,scope][,domain])点击展开

一、接口功能

通过iframe设置src的方式,嵌入proxy.html,并携带相关参数,实现跨域解决方案
详细参数列表,见参数说明

二、参数说明

/**
 * iframe:src=proxy.html?参数列表
 *
 * @param {Function}  fun    参数必选,表示代理页面需要执行的回调方法:callback
 * @param {String}    scope  参数可选,默认scope=top,表示在top窗口中执行回调,
 *                           需要在父窗口中执行回调时,需要显式设定scope=parent
 * @param {String}    domain 参数可选,表示是否需要强制为proxy.html设置document.domain,默认为空
 * @param {String}    arg    参数可选,当且仅当fun的参数列表为多个独立参数时使用,并且可以配置多个arg参数
 * @param {String}    *      参数可选,当且仅当fun的参数json对象时使用,这里的*表示json中的各个key
 */
mark:关于domain,一般情况下尽量不要设置该参数;只有在scope所在窗口也设置了document.domain的情况下, 才有必要在参数列表中加上domain,且必须与scope窗口domain保持一致,否则,fun无法执行。
arg参数可以配一个或多个,但顺序必须与fun中的参数列表保持一致,如:arg=1&arg=2&arg=3
当fun的参数列表为一个json对象时,参数需要配置为:errorno=1&errorMsg=failed

三、示例

1、回调方法fun的参数列表为多个独立参数的情况
假设fun的定义体为如下形式:
                    // 参数列表为独立参数组成,第一个参数为错误号,第二个为错误消息
                    editor.setMessage = function(errorNo,errorMsg){
                        // TODO ...
                    }
                
那么,proxy.html的iframe:src用法为:
                    
                    
                
如上的iframe:src:proxy.html,最终会被解析为如下js代码,并执行:
                    // 没有设置scope参数,默认表示top窗口
                    top.editor.setMessage(1000,'数据提交成功');
                
2、回调方法fun的参数列表为JSON的情况
假设fun的定义体为如下形式:
                    // obj格式为:{errorNo:'',errorMsg:''}
                    editor.setMessage = function(obj){
                        // TODO ...
                    }
                
那么,proxy.html的iframe:src用法为:
                    
                    
                
如上的iframe:src:proxy.html,最终会被解析为如下js代码,并执行:
                    // 没有设置scope参数,默认表示top窗口
                    top.editor.setMessage({
                        errorNo: 1000,
                        errorMsg: '数据提交成功'
                    });
                
3、如果回调方法是在parent,而不是在top的情况,需要设置scope=parent
                    
                    
                
如上的iframe:src:proxy.html,最终会被解析为如下js代码,并执行:
                    // 在parent中执行回调
                    parent.editor.setMessage({
                        errorNo: 1000
                    });
                
4、如果scope所在窗口设置了document.domain,并且与proxy.html所在子域不一致,需要设置domain
                    
                    
                
如上的iframe:src:proxy.html,最终会被解析为如下js代码,并执行:
                    // 先在proxy.html中设置domain,然后执行回调
                    document.domain = 'doitbegin.com';
                    top.editor.setMessage({
                        errorNo: 1000
                    });