不自重者,取辱。不自长者,取祸。不自满者,受益。不自足者,博闻。

前一篇文章有写到form表单+iframe的方式,需要处理跨域的问题,里面用到一个代理文件,例子中给的非常简单,这里补上一个功能比较完善的前端代理文件,能兼容多种参数,多种回调。


前端代理文件:http://www.baidufe.com/proxy

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Proxy Page</title>
    <script type="text/javascript">
    (function(){
        if(top !== self){
            var s = (location.hash || location.search).substr(1).split('&'), //提取参数
                fun = '', // 回调方法 
                isParentScope = false, g, scope, //范围:parent or top
                reg = /[^\w\.]/g,  // 回调方法正则
                args = {},isArgsJson = true,
                domain = "baidufe.com"; // 参数
    
            for(var i=0,l=s.length,item;i<l;i++){
                item = (s[i] || '').split('=');
                if(item[0] === 'fun'){  // 回调方法
                    fun = item[1].replace(reg, '');
                }else if(item[0] === 'parent' && item[1]){ // 标记范围
                    isParentScope = true;
                }else if(item[0] === 'domain' && item[1]){ // 标记范围
                    domain = item[1];
                }else if(item[0] === 'arg'){    // 聚合参数
                    if(isArgsJson) {
                        isArgsJson = false;
                        args = [];
                    }
                    args.push(item[1]);
                }else{  // 参数聚合
                    args[item[0].replace(reg, '')]=(item[1] || '').replace(/[><\'\"\{\}]/g, '');
                }
            }
    
            // 设置scope
            var _setScope = function(isParentScope) {
                if(isParentScope) {
                    scope = g = parent;
                }else{
                    scope = g = top;
                }
            };
    
            // domain校验、设定
            try{
                _setScope(isParentScope);
                // 这一步用来校验是否存在跨域问题
                scope.document;
            }catch(ex){
                // 跨域了,就需要设置domain了
                document.domain = domain ;
                _setScope(isParentScope);
            }
    
            try{
                fun = fun.split('.');
                if(fun[0] === 'window' 
                    || fun[0] === 'document' 
                    || fun[0] === 'location' 
                    || fun[0] === 'alert'
                    || fun[0].indexOf('.alert') > -1){
                }else{
                    // 回调方法拼接
                    for(var i=0,l=fun.length;i<l;i++){
                        if(i<l-1){
                            scope = scope[fun[i]];
                        }
                        g = g[fun[i]];
                    }
    
                    // 方法回调
                    if(isArgsJson){
                        g.call(scope,args);
                    }else{
                        g.apply(scope,args);
                    }
                }
            }catch(e){}
        }
    })();
    </script>
</head>
<body>
        
</body>
</html>
#web前端 #跨域 #proxy 浏览(782) 阅读全文 评论

只要是足够大的web项目,一定会遇到iframe跨域的情况,而且问题就在于,跨域后,iframe中如何触发父页面的回调呢?

别告诉我用设置document.domain的方式,因为这个非常不靠谱,而且还会造成一连串的跨域解决问题,只要一个页面设置了domain,该页面嵌入的所有iframe都必须设置domain,才能进行相互访问,否则,非常悲剧。


这里,我们不谈domain,我们说说别的解决方案:iframe+iframe。下面来举个例子。


1、假定http://www.baidufe.com/cmt是专门用来进行评论管理的页面:A在A页面上定义了回调方法:callback,需要在评论提交完成后执行,并将相关数据回传给callback


<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>评论管理</title>
        <script type="text/javascript">
            var callback = function(cmtData){
                // TODO
            };
        </script>
    </head>
    <body>
        <iframe src="#" frameborder="0" id="cmtIframe" name="cmtIframe"></iframe>
        <form action="http://cmt.baidufe.com" target="cmtIframe">
            ...
        </form>
    </body>
</html>

2、评论信息会提交到http://cmt.baidufe.com

#web前端 #javascript #跨域 浏览(3782) 阅读全文 评论(4)