JavaScript设计模式(九)【代理模式】

最新推荐文章于 2025-06-23 10:27:19 发布

转载最新推荐文章于 2025-06-23 10:27:19 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/WuLex

Javascript设计模式专栏收录该内容

37 篇文章

订阅专栏

本文介绍了一种网站统计方法，通过自定义统计函数实现数据收集，并探讨了跨域代理技术，使用iframe和form表单实现不同域名间的数据传递，解决跨域问题。

站长统计

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>站长统计</title>
</head>
<body>
<script>
    //统计代理
    var Count = (function() {
        //缓存图片
        var _img = new Image();
        //返回统计函数
        return function(param) {
            //统计请求字符串
            var str = 'http://www.count.com/a.gif?';
            //拼接请求字符串
            for (var i in param) {
                str += i + '=' + param[i];
            }
            //发送统计请求
            _img.src = str;
        }
    })();

    window.onload = function() {
        //测试用例，统计num
        Count({ num: 10 });
    }
</script>
</body>
</html>

3.代理模板.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代理模板 X域被代理页面A</title>
</head>
<body>
<script>
    function callback(data) {
        console.log('成功接收数据', data);
    }
</script>
<iframe name="proxyIframe" id="proxyIframe" src=""></iframe>
<form action="4.代理模板.html" method="post" target="proxyIframe">
    <input type="text" name="callback" value="callback">
    <input type="text" name="proxy" value="4.代理模板.html">
    <input type="submit" value="提交">
</form>
</body>
</html>

4.代理模板.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代理模板 X域代理页面B</title>
</head>
<body>
<script>
    window.onload = function() {
        //如果不在A页面返回，不执行
        if (top == self) return;
        //获取并解析searcher中的数据
        var arr = location.search.substr(1).split('&'),
            //预定义函数名称以及参数集
            fn,
            args;
        for (var i = 0, len = arr.length, item; i < len; i++) {
            //解析searcher中的每组数据
            item = arr[i].split('=');
            //判断是否为回调函数
            if (item[0] == 'callback') {
                //设置回调函数
                fn = item[1];
            } else if (item[0] == 'arg') {
                args = item[1];
            }
        }
        try {
            //执行A页面中预设的回调函数
            eval('top.' + fn + '("' + args + '")');
        } catch (e) {
        }
    }
</script>
</body>
</html>