【跨域】标签下的文章

前一篇文章有写到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>

2012-06-11 09:16:44 #web前端 #跨域 #proxy 阅读全文评论

关于form+iframe跨域后的js回调处理

只要是足够大的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

2012-06-11 08:51:33 #web前端 #javascript #跨域阅读全文评论(4)

Web开发者助手 FeHelper