程序员必知：广告等第三方应用嵌入到web页面方案之使用js片段-阿里云开发者社区

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

?1234 var cpro_id = “u2557752”;

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

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

　　2.通过hash传递

?1[/code>script src=“ type=“text/javascript”>

　　优点: 使用URL,便于缓存

　　缺点: 必须进行DOM查询

　　3.自定义属性

?1[/code>script data-hxh-coupon-id=‘1234’ src=“ type=“text/javascript”>

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

　　缺点: 必须进行DOM查询

　　4.使用全局变量

?1234[/code>script type=“text/javascript”> var couponId = ‘87393’;script src=“ type=“text/javascript”>

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

　　缺点: 使用了全局变量

2.获取数据

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

3.输出html

使用document.write

p.p1 { margin: 0; font: 16px "Trebuchet MS"; color: rgba(0, 0, 0, 1); -webkit-text-stroke: #000000 }

span.s1 { font-kerning: none; font-variant-ligatures: no-common-ligatures }

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

操作DOM添加

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

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

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

?123456789[/code>script id='hxh-coupon-scandown' type="text/javascript"> (function(){ var script = document.createElement('script'); script.async = true; script.src = ''; var entry = document.getElementsByTagName('script')【0】; entry.parentNode.insertBefore(script, entry); })()

　　优点:

p.p1 { margin: 0; font: 16px "Trebuchet MS"; color: rgba(0, 0, 0, 1); -webkit-text-stroke: #000000 }

p.p2 { margin: 0; font: 16px "Trebuchet MS"; color: rgba(0, 0, 0, 1); -webkit-text-stroke: #000000; min-height: 19px }

span.s1 { font-kerning: none; font-variant-ligatures: no-common-ligatures }

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

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

　　缺点:

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

　　　　2.会继承父页面样式

　　　　3.主页面可更改DOM内容

p.p1 { margin: 0; font: 16px "Trebuchet MS"; color: rgba(0, 0, 0, 1); -webkit-text-stroke: #000000 }

span.s1 { font-kerning: none; font-variant-ligatures: no-common-ligatures }

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

使用不设置src的iframe

li.li1 { margin: 0; font: 17px "Trebuchet MS"; color: rgba(0, 0, 0, 1); -webkit-text-stroke: #000000 }

span.s1 { font: 12px Helvetica; color: rgba(0, 0, 0, 1); -webkit-text-stroke: 0px #000000 }

span.s2 { font-kerning: none; font-variant-ligatures: no-common-ligatures }

span.s3 { font: 12px Helvetica; color: rgba(0, 0, 0, 1) }

ol.ol1 { list-style-type: decimal }

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

?12345678var doc = document.getElementsByTagName('iframe')【0】.contentWindow.document;doc.writeln("点击");doc.writeln("");doc.writeln("var btn = document.getElementById(\'btn\');");doc.writeln("btn.onclick = function(){");doc.writeln("parent.parentEvent();");doc.writeln("");doc.close();　

p.p1 { margin: 0; text-align: center; font: 15px "Trebuchet MS"; color: rgba(255, 38, 0, 1); -webkit-text-stroke: #ff2600 }

span.s1 { font-kerning: none; font-variant-ligatures: no-common-ligatures }

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

优点:

p.p1 { margin: 0; font: 16px "PingFang SC"; color: rgba(67, 91, 102, 1); -webkit-text-stroke: #000000 }

p.p2 { margin: 0; font: 16px "PingFang SC"; color: rgba(67, 91, 102, 1); -webkit-text-stroke: #000000; min-height: 22px }

span.s1 { font-kerning: none }

span.s2 { font-kerning: none; color: rgba(67, 90, 102, 1) }

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

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

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

缺点:

p.p1 { margin: 0; font: 16px "PingFang SC"; color: rgba(67, 91, 102, 1); -webkit-text-stroke: #000000 }

p.p2 { margin: 0; font: 16px "PingFang SC"; color: rgba(67, 91, 102, 1); -webkit-text-stroke: #000000; min-height: 22px }

span.s1 { font-kerning: none }

　　1. Iframe标签的创建速度慢

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

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

不适合使用iframe的情况:

p.p1 { margin: 0; font: 18px "Trebuchet MS"; color: rgba(0, 0, 0, 1); -webkit-text-stroke: #000000 }

span.s1 { font-kerning: none; font-variant-ligatures: no-common-ligatures }

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

p.p1 { margin: 0; font: 18px "Trebuchet MS"; color: rgba(0, 0, 0, 1); -webkit-text-stroke: #000000 }

span.s1 { font-kerning: none; font-variant-ligatures: no-common-ligatures }

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

p.p1 { margin: 0; font: 18px "Trebuchet MS"; color: rgba(0, 0, 0, 1); -webkit-text-stroke: #000000 }

span.s1 { font-kerning: none; font-variant-ligatures: no-common-ligatures }

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

p.p1 { margin: 0; font: 12px Helvetica; color: rgba(0, 0, 0, 1); -webkit-text-stroke: #000000 }

span.s1 { font-kerning: none; font-variant-ligatures: no-common-ligatures }

p.p1 { margin: 0; font: 12px Helvetica; color: rgba(0, 0, 0, 1); -webkit-text-stroke: #000000 }

span.s1 { font-kerning: none; font-variant-ligatures: no-common-ligatures }

p.p1 { margin: 0; text-align: center; font: 18px "Trebuchet MS"; color: rgba(0, 0, 0, 1); -webkit-text-stroke: #000000 }