web站点 开放第三方API流程(7) - 嵌入包含广告的第三方iframe

发表于 | 分类于 ， | 0 Comments | 阅读次数:

我们都知道，google的广告在 ip地址下其实是显示不出来的，那么我们怎么在ip地址下的页面显示google的广告呢？
很简单，把google的广告部署在线上，然后作为一个iframe嵌入到你的ip地址的页面去。这样就可以正常显示了。
这时候所有的配置项都可以作为参数放到url上。 具体实作如下：
以下是子页面的所有的代码：

index.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en-us">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>recommend</title>
    <script type="text/javascript" src="../jschannel.js"></script>
    <script type="text/javascript" src="openMethodList.js"></script>
    <script type="text/javascript" src="../airdroid.js"></script>
    <script type="text/javascript" src="openApi.js"></script>
    <style>
        body {
            margin:0;
            padding:0;
            overflow: hidden;
        }
    </style>
    </head>
    <body>
        <script type='text/javascript'>
            var getUrlParam = function (name) {
                name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
                var regexS = "[\\?&]" + name + "=([^&#]*)";
                var regex = new RegExp(regexS);
                var results = regex.exec(window.location.href);
                if (results == null) {
                    return "";
                } else {
                    return results[1];
                }
            };
            var recommendObj = getUrlParam("setting");
            if(recommendObj){
                recommendObj = JSON.parse(decodeURIComponent(recommendObj));
                var dfpSetting = recommendObj.options;
                var googletag = googletag || {};
                googletag.cmd = googletag.cmd || [];
                (function() {
                    var gads = document.createElement('script');
                    gads.async = true;
                    gads.type = 'text/javascript';
                    var useSSL = 'https:' == document.location.protocol;
                    gads.src = (useSSL ? 'https:' : 'http:') +
                    '//www.googletagservices.com/tag/js/gpt.js';
                    var node = document.getElementsByTagName('script')[0];
                    node.parentNode.insertBefore(gads, node);
                })();
                googletag.cmd.push(function() {
                    googletag.defineSlot('/xxxxxx/' + dfpSetting.name, dfpSetting.size , dfpSetting.divId).addService(googletag.pubads());
                    googletag.pubads().enableSingleRequest();
                    googletag.pubads().collapseEmptyDivs();
                    googletag.enableServices();
                    var reLoadCount = 0;
                    // check recommend render
                    googletag.pubads().addEventListener('slotRenderEnded', function(event) {
                        console.log('Slot has been rendered:');
                        if (event.isEmpty) {
                            console.log("Slot render empty");
                            if(reLoadCount < dfpSetting.reLoadMaxCount){
                                setTimeout(function () {
                                    reLoadCount += 1;
                                    console.log("Slot reload");
                                    googletag.pubads().refresh();
                                }, 2000);
                            }else{
                                console.log("Slot Empty");
                                AirDroidHelper.Service.removeRecommendDom();
                            }
                        }else{
                            AirDroidHelper.Service.showRecommendDom();
                        }
                    });
                });
                document.body.style.width = dfpSetting.css.width;
                document.body.style.height = dfpSetting.css.height;
                var divDom = document.createElement("div");
                divDom.id = dfpSetting.divId;
                divDom.innerHTML = "";
                divDom.style.width = dfpSetting.css.width;
                divDom.style.height = dfpSetting.css.height;
                document.body.appendChild(divDom);
            }
            if(AirDroidHelper){
                AirDroidHelper.init({accessKey:"xxxx"},function(){
                    googletag.cmd.push(function() {
                        googletag.display(dfpSetting.divId);
                    });
                },function(error,msg){
                    console.debug("error:" + error + " msg : " + msg);
                })
            }
        </script>
    </body>
</html>

openMethodList.js:
1
2
3
4
5
6
7
8
9
10
11
12
(function () {
    window.AirdroidRuntime = {};
    AirdroidRuntime.getMethodList = function() {
        return {
            // 服务端增加接口，只需要在列表里添加接口名就行。
             SERVER_METHODS : [
                "removeRecommendDom",
                "showRecommendDom"
             ]
        }
    }
})();

这边只增加了两个方法，一个是告诉父页面，广告已经显示出来了，一个是告诉父页面，可以移除广告了
接下来封装后的 openApi.js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
(function(window){
    // 初始化 API 对象
    var airdroidApi = new window.AirdroidApi();
    // 这里每增加一个方法，都要去 airdroid.js 的 方法列表里面添加
    // 因为该通信是异步的，因此每次的结果都要回调
    window.AirDroidHelper = {
        isFunction:function(obj){
            return airdroidApi.isFunction(obj);
        },
        // 初始化，传入accesskey
        init:function(params,successCb,failCb){
            var self = this;
            airdroidApi.init({
                params : {
                    accessKey: params.accessKey
                },
                // 设置超时时间，因为连接的超时时间是36秒，因此这边要设的更长
                success: function(result){
                    if(self.isFunction(successCb)){
                        successCb();
                    }
                },
                error: function(errorType,msg){
                    console.debug("error：" + errorType + ",msg：" + msg);
                    if(self.isFunction(failCb)){
                        failCb(errorType,msg);
                    }
                }
            })
        },
        // 服务请求管理接口
        Service: {
            // 移除recommend dom
            removeRecommendDom: function () {
                return airdroidApi.removeRecommendDom({
                    success: function(){}
                });
            },
            // 显示recommend dom
            showRecommendDom: function () {
                return airdroidApi.showRecommendDom({
                    success: function(){}
                });
            }
        }
    };
})(window);
console.debug('Airdroid Open Api  ready !!!');

airdroid.js 这个js是不会变的，跟之前一样。
父页面controlMap 要给他加一个：
1
2
3
4
5
6
7
8
9
10
11
12
// dfp recommend 接口
"xxxx": {
    token: "xxxx",
    // 所允许的方法
    openMap: {
      // 服务请求
      SERVER_METHODS:[
        "removeRecommendDom",
        "showRecommendDom"
      ]
    }
},

同时在 父页面的 apiprovider.js 要提供这两个方法的调用：
1
2
3
4
5
6
removeRecommendDom: function(trans, params){
    do something
},
showRecommendDom: function(trans, params){
    do something
},

这样就可以了

完整系列：
web站点 开放第三方API流程(1) - 简介
web站点 开放第三方API流程(2) - 详解 jschannel
web站点 开放第三方API流程(3) - web api 的设计
web站点 开放第三方API流程(4) - demo的架构详解
web站点 开放第三方API流程(5) - demo的sdk详解
web站点 开放第三方API流程(6) - 父页面的sdk详解
web站点 开放第三方API流程(7) - 嵌入包含广告的第三方iframe