页面监控容器实现记录

    看到标题我也傻眼了，感觉即是我自己都不能望文识义啊，没办法，先让我多些笔墨来说明下。

    场景：我公司加盟另加公司网页游戏，他们提供入口，我们传入用户名密码积分，通过入口验证后，会转到游戏页面。对用户来说，好像玩的游戏还是我们公司提供的，毫无违和感。但是对我们做事的来说，就有问题了。如果用户不主动退出游戏就挂那里，或者一段时间不再从我们自己公司游戏入口登录，则一段时间内，用户的积分余额留在了另个公司平台。而我们这边每天都要结账，这样就对不齐账了。

   难点：需要解决跨域问题。

    解决方案：自己公司这边提供一个容器页，兄弟公司任何来的内容都在这个容器内放置。如果容器内的页面在一小时（当然可配置）无任何动静（指未监控到任何鼠标事件）则主动退出转移积分回自己平台并关闭页面，或是在页面被关闭时发出转移回积分的请求。

   具体实现：

  方案1：自己写个服务器上的中介，本公司的页面向本服务器上获取兄弟公司内容，中介通过类似网页抓取方法获取网页内容，这样来解决跨域问题。但是游戏页面太复杂了，好多资源是要主页面load完之后再load，并且还有路径问题，想想头疼，算了。

  方案2：完全丢给iframe。存在问题是IE6/IE7支持的P3P(Platform for Privacy Preferences Project (P3P) specification)协议默认阻止第三方无隐私安全声明的cookie，Firefox目前还不支持P3P安全特性，firefox中自然也不存在此问题了。解决方法参考http://www.cnblogs.com/SeaSun/archive/2013/02/05/2892817.html，在要嵌入的内容中(iframe指向的站点)输出P3P的主机头声明，具体实现

if (Request.Browser.Browser.ToUpper().Contains("IE"))
                Response.Headers.Add("P3P", "CP=CAO PSA OUR");

好了且看具体实现：

  a, Container.php，主要包含一个iframe作为容器。这里有个关键点是iframe随内容自动调整大写的问题，大概参考了各种屌炸天的方案后，有个兄台的特别实惠简单，具体参考如下页面，去掉无关js代码，php代码后，就是他的简单实用解决方法。jquery.iframetracker.js用于监控页面的一个库，可以google之。getCredit.php就是用于处理积分取回的页面。

<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 14-7-1
 * Time: 下午3:31
 */
require_once ("./global.php");

$gameUrl=$_SESSION["gameUrl"];
$ar = array('gameUrl' => $gameUrl);

$html = <<<HTML
<head>
    <title></title>
    <style>
 
       <!--实现iframe自动调整高宽的代码-->
        body {
            margin-left: 0px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.iframetracker.js"></script>
    <script type="text/javascript" language="javascript">
        var activeTime = new Date();
        var interHMTime = 60*60*1000;//3600000
        function onContentLoad(parameters) {
            setCwinHeight();
            onContentClick();
        }
 
        /////实现iframe自动调整高宽的代码
        function setCwinHeight() {
            var iframeid = document.getElementById("iframepage"); //iframe id
            if (document.getElementById) {
                if (iframeid&&!window.opera) {
                    if (iframeid.contentDocument && iframeid.contentDocument.body.offsetHeight) {
                        iframeid.height = iframeid.contentDocument.body.offsetHeight;
                    } else if (iframeid.Document && iframeid.Document.body.scrollHeight) {
                        iframeid.height = iframeid.Document.body.scrollHeight;
                    }
                }
            }
        }

        function onContentClick() {
            //window.frames['iframepage'].document.body.onclick = function () {
              //  activeTime = new Date();
                //alert(activeTime.getMinutes());
            //};

    $("#iframepage").iframeTracker({
        blurCallback: function(){
           activeTime = new Date();
        },

        _overId: null
    });


        }

        window.onbeforeunload = function (e) {
            window.open("getCredit.php", '_blank');
            window.open("getCredit.php", '_self');
        };


        function monitor() {
            var curDate = new Date();
            var differHMs = curDate.getTime() - activeTime.getTime(); //时间差的毫秒数
            if (differHMs > interHMTime) {
                window.location.href = "getCredit.php";
            }
        }

        setInterval(monitor,3600000);
    </script>
</head>
<body>
<div id="container">
<iframe src="{$ar['gameUrl']}" marginheight="0" marginwidth="0" frameborder="0" scrolling="no" width="100%" height="100%" id="iframepage" name="iframepage" onload="onContentLoad()"></iframe>
</div>
</body>
HTML;

echo $html;

?>

 

posted on 2014-08-10 14:11  arg  阅读(446)  评论(0)  编辑  收藏  举报

导航