广告等第三方应用嵌入到web页面方案 之 使用js片段

在自己的项目中嵌入过广告的朋友们可能都用过百度联盟, 只需要嵌入如下一段js代码片段, 就可以在自己的项目中嵌入广告, 来获得收益.

<script type=“text javascript”>
   var cpro_id = “u2557752”;
</script>
<script src=“http://cpro.baidustatic.com/cpro/ui/cm.js?id='i9898'” type=“text/javascript”></script>

 本文就是主要介绍如何通过嵌入js片段的方式来嵌入广告等第三方的应用的, 具体的实现方案有两种:

在服务端生成脚本:

 服务端接收到请求后, 从url中提取到参数, 再根据参数从数据库中查找出对应的数据信息,比如是广告的话, 就查找到对应的广告素材, 并将查询到的数据信息插到javascript模板中,

浏览器执行js脚本代码,创建出广告

直接引入静态js脚本:

首先js文件中提取到参数,根据参数向服务端发起请求, 获取到对应的数据, 再通过js创建html片段,输出到页面上

两种方案对比: 

       服务端生成脚本,所有的代码和数据都包含在生成的js文件中,不需要做额外的请求,适用于内容及样式相对简单的页面.比如只有一个图片的广告展示.对于内容较多,样式较为复杂的内容展示通过第二种方案实现更加灵活.

两种方案实现起来, 主要以下几步: 

1.获取参数 --> 2.获取数据 --> 3.输出html

1.传递参数

下面介绍一下脚本参数传递的几种方式的优缺点:

  1.通过拼接URL传递

<script src=“http://cpro.baidustatic.com/cpro/ui/cm.js?cpro_id=u2557752” type=“text/javascript”></script>

  优点: 可通过URL传递到服务器

  缺点: 必须进行DOM查询,无法缓存

  2.通过hash传递

<script src=“http://cpro.baidustatic.com/cpro/ui/cm.js#cpro_id=u2557752” type=“text/javascript”></script>

优点: 使用URL,便于缓存

  缺点:  必须进行DOM查询

  3.自定义属性

<script data-hxh-coupon-id=‘1234’ src=“http://cpro.baidustatic.com/cpro/ui/cm.js type=“text/javascript”></script>

优点: 可读性强, 便于缓存, 易于识别脚本引入代码的位置

  缺点:  必须进行DOM查询

  4.使用全局变量

<script type=“text/javascript”>
  var couponId = ‘87393’;
</script>
<script src=“http://cpro.baidustatic.com/cpro/ui/cm.js type=“text/javascript”></script>

优点: 可读性强,便于缓存,参数类型灵活,无需进行DOM查询

  缺点: 使用了全局变量

2.获取数据

关于获取数据, 服务端生成脚本, 服务端直接查询数据, 静态js脚本方案中, 可使用jsonP, Cors等方案进行跨域请求.

3.输出html

  • 使用document.write

  document.write直接在当前文档流中写入字符串,一旦文档流已经关闭,就打开新的文档流并写入,原来的文档流会被清空,已渲染好的页面就会被清除,浏览器将重新构建DOM并渲染页面.所以使用这种方案, 就一必须是同步执行嵌入的这段js代码, 作为第三方脚本引入,阻塞性的脚本会阻止主页面的渲染,如果js文件加载迟缓,甚至不可用的, 会给主页面造成严重的性能问题, 所有不建议使用.

  •  操作DOM添加

  1.在目标位置嵌入js片段, 并使用预先定义的ID,class,data-*等(如上)

  2.js文件中创建DOM元素,将HTML字符串赋值给元素的innerHTML属性

  3.根据ID,calss,data-*等查询到脚本所在位置,并将元素添加到DOM中 

<script id='hxh-coupon-scandown' type="text/javascript">
	(function(){
		var script = document.createElement('script');
		script.async = true;
		script.src = 'http://www.boxmars.com?id=123';
		var entry = document.getElementsByTagName('script')[0];
		entry.parentNode.insertBefore(script, entry);
	})()
</script>

  优点: 

    1.可以异步加载第三方DOM, 不阻塞主页面的渲染,即使js出错,也不会影响到主页面

    2.可以将创建的DOM动态插入到已存在的元素之后(即可以追加到已知位置) 

  缺点:

    1.使用字符串拼接不利于HTML片段的编写和维护

    2.会继承父页面样式

    3.主页面可更改DOM内容

  字符串拼接不利于编写和维护的问题,可以通过JavaScript模板引擎库来编写HTML片段, 流行模板库:HandlebarsJS,Mustache,BAIDU-Template,artTemplate等

  • 使用不设置src的iframe

  主页面提供一个不设置src的iframe标签,通过iframe的contentWindow访问iframe的DOM,使用document.write将HTML直接写入到iframe中

var doc = document.getElementsByTagName('iframe')[0].contentWindow.document;
doc.writeln("<button id=\'btn\'>点击</button>");
doc.writeln("<script type=\'text/javascript\'>");
doc.writeln("var btn = document.getElementById(\'btn\');");
doc.writeln("btn.onclick = function(){");
doc.writeln("parent.parentEvent();");
doc.writeln("</script>");
doc.close(); 

  注: iframe由浏览器异步处理, 所以此处使用document.write()并不会阻止父页面的加载

优点: 

  1.完全独立的DOM环境,不会继承父页面的样式

  2完全独立的window,避免和主页面其他脚本冲突

  3.可直接与主页面进行交互(与iframe引入外部页面对比)

缺点: 

  1. Iframe标签的创建速度慢

  2.主页面可以访问iframe的DOM环境并可进行更改

 嵌入第三方页面两种方案中,另一种方案(http://www.cnblogs.com/yuqing6/p/8462239.html) 都大篇幅介绍使用了iframe进行html输出,iframe提供了一种最佳的避免样式和脚本冲突的嵌入途径,但是有些情况在主页面的DOM中去渲染更为合适

不适合使用iframe的情况: 

  1.需要在iframe外部呈现内容, 场景: 第三方应用中需要弹出对话框时,如果iframe不是覆盖整个页面的, 就无法正常展示对话框 

  2.一个页面引入很多个iframe嵌入页面, 同一个页面引入许多个iframe时, 会带来主页面很大的性能开销, 对于只是渲染一两次情况, 这种性能消耗可以忽略不计

  3.需要继承父页面的基础样式, 有些时候,希望第三方应用继承父页面的基础样式, 来和主页面的样式风格保持一致,这种情况不适用于使用iframe

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏移动端开发

告诉你 iOS9.0 之后的Bitcode到底是什么!!

 用Xcode 7 beta 3在真机(iOS 8.3)上运行一下工程,结果发现工程编译不过。看了下问题,报的是以下错误: ld: ‘/Users/**/Fr...

3828
来自专栏州的先生

快速掌握Python Selenium Web自动化:搭建Selenium环境

1933
来自专栏Zchannel

#Linux建站入门第三期#使用Linux面板进行建站

linux最大的特点就是文字界面,不像windows可以不输入任何命令就可以进行各种操作(虽然linux系统也有图形界面但是不建议使用,因为图形界面无法完成很多...

2934
来自专栏JackeyGao的博客

使用SASS做个可自定义主题的网页

Sass 是对 CSS 的扩展,让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能, 并且完全兼容 CSS 语法。 Sa...

2002
来自专栏吴伟祥

java web项目修改favicon.ico图标的方式

修改tomcat小猫图标,设置项目的favicon图标,方式有两种:全局方式和局部方式

1534
来自专栏CodingBlock

Android查缺补漏(View篇)--布局文件中的“@+id”和“@id”有什么区别?

但需要注意的是在布局文件中,被引用的id要在引用位置的上面,否则会编译出错,如下:

1264
来自专栏每日一篇技术文章

带你入坑02-weex-路由的使用

创建一个父组件和两个子组件 父组件foo.vue 的文件和子组件home.vue和me.vue

3421
来自专栏技术博客

VS2010Web默认的浏览器设置和VS里调试JavaScript代码的设置

   重装系统后,VS调用的Web浏览器不是IE了,VS调式不了JavaScript代码了。这两天一直在试终于搞定了。这里查找的问题当然主要是VS里面调式Jav...

1724
来自专栏奇梦博客

发帖UMEditor编辑器增加表情,附加表情包下载 PHP 配置 XiunoBBS

1525
来自专栏小程序解决方案的专栏

通过 WeCOS 进行小程序瘦身

尽管 4 月份微信官方将小程序的大小限制从 1M 放开到 2M,但是对于使用大量图片的小程序(电商等)来说,2M 的限制还是显得拮据。基于这种场景,腾讯云微信小...

2.4K4

扫码关注云+社区

领取腾讯云代金券