[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告


Posted in Javascript onMay 11, 2016

本文主要介绍一种新的广告后加载的方式,支持自定义HTML广告、百度联盟广告和谷歌联盟广告。这种方式在页面加载完成后执行,不影响内容的显示,对用户更加友好。

我们在网站上放置广告,最简单的方法就是把JS代码,插入指定的位置,这样带了后果就是,页面按照顺序加载,偶尔一条广告代码卡住,整个页面都会卡住,给用户带来的体验是极差的。

那么怎么解决这种问题呢?先说一下原理,在我们的页面上先预留一些占位符,为了不影响页面内容的加载,我们在页面的底部引入JS处理,逐个把占位符替换成相应的广告。

下面我们看具体的实现步骤:

一、在页面上放置占位符,其实就是一个span标记

<span id="ads_one" class="jbTestPos"></span>

<span id="ads_two" class="jbTestPos"></span>

<span id="ads_three" class="jbTestPos"></span>

二、编写独立的JS脚本代码:jbLoader.js

jbMap = window.jbMap || {};

function jbViaJs(locationId) {

    var _f = undefined;

    var _fconv = 'jbMap[\"' + locationId + '\"]';

    try {

        _f = eval(_fconv);

        if (_f != undefined) {

            _f()

        }

    } catch(e) {}

}

function jbLoader(closetag) {

    var jbTest = null,

    jbTestPos = document.getElementsByTagName("span");

    for (var i = 0; i < jbTestPos.length; i++) {

        if (jbTestPos[i].className == "jbTestPos") {

            jbTest = jbTestPos[i];

            break

        }

    }

    if (jbTest == null) return;

    if (!closetag) {

        document.write("<span id=jbTestPos_" + jbTest.id + " style=display:none>");

        jbViaJs(jbTest.id);

        return

    }

    document.write("</span>");

    var real = document.getElementById("jbTestPos_" + jbTest.id);

    for (var i = 0; i < real.childNodes.length; i++) {

        var node = real.childNodes[i];

        if (node.tagName == "SCRIPT" && /closetag/.test(node.className)) continue;

        jbTest.parentNode.insertBefore(node, jbTest);

        i--

    }

    jbTest.parentNode.removeChild(jbTest);

    real.parentNode.removeChild(real)

}

 

jbMap['ads_one'] = function() {

 document.writeln('<a href="https://3water.com/" target="_blank">三水点靠木</a>');

};

 

jbMap['ads_two'] = function() {

 document.writeln('<scr'+'ipt type="text/javascript">var cpro_id = "u336546";</script><script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></scr'+'ipt>');

};

 

jbMap['ads_three'] = function() {

 document.writeln('<scri'+'pt async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></scri'+'pt><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-1247620132145618" data-ad-slot="2253650178" data-override-format="true" data-page-url="https://3water.com"></ins><scri'+'pt>(adsbygoogle = window.adsbygoogle || []).push({});</s'+'cript>');

};

注意:jbMap是放置广告的数组,数组的Key和Span标记的ID是对应的,我们可以在这个JS中按照这种形式添加自己的广告。这种广告加载方式,支持自定义的HTML广告、百度联盟广告、谷歌联盟广告,这里都给大家做了演示。

三、在页面底部中引入JS,调用jbLoader加载广告

<script type="text/javascript" src='js/jbLoader.js'></script>

<script>jbLoader();</script><script class="closetag">jbLoader(true);</script>

<script>jbLoader();</script><script class="closetag">jbLoader(true);</script>

<script>jbLoader();</script><script class="closetag">jbLoader(true);</script>

注意:格式必须是如上这种格式,有几个占位符,就添加几个<script>jbLoader();</script><script class="closetag">jbLoader(true);</script>

不要问小编为什么要这样调用,其实小编也研究了一下:
1.第一次jbLoader()是为了写标记,第二次jbLoader(true)是为了替换标记。
2.用两个<script>是为了第二次调用能取到相应的元素。
3.有几个占位符就写几行script是为了互不影响,各显示各的。

总之:好多大网站都在使用这种方法,大家放心用好了。至此,就完成了页面广告后加载的调用。

Javascript 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
javascript 面向对象 function类
May 13 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
详解Vue 动态组件与全局事件绑定总结
Nov 11 Javascript
微信小程序实现工作时间段选择
Feb 15 Javascript
javascript实现手动点赞效果
Apr 09 Javascript
微信小程序云开发实现增删改查功能
May 17 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 #Javascript
javascript简单判断输入内容是否合法的方法
May 11 #Javascript
解析JavaScript面向对象概念中的Object类型与作用域
May 10 #Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
May 10 #Javascript
JavaScript中的原型prototype完全解析
May 10 #Javascript
简单解析JavaScript中的__proto__属性
May 10 #Javascript
Web Uploader文件上传插件使用详解
May 10 #Javascript
You might like
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
PHP去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
javascript document.execCommand() 常用解析
2009/12/14 Javascript
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
在linux中使用包管理器安装node.js
2015/03/13 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
学习JavaScript鼠标响应事件
2015/12/25 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
js运动事件函数详解
2016/10/21 Javascript
利用types增强vscode中js代码提示功能详解
2017/07/07 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
vue.js如何将echarts封装为组件一键使用详解
2017/10/10 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
python实现趣味图片字符化
2019/04/30 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
pytorch实现对输入超过三通道的数据进行训练
2020/01/15 Python
Python字符串三种格式化输出
2020/09/17 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
Internet体系结构
2014/12/21 面试题
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
2015年青年志愿者工作总结
2015/05/20 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android