广告等第三方应用嵌入到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
转载于:https://www.cnblogs.com/yuqing6/p/8467177.html
广告等第三方应用嵌入到web页面方案 之 使用js片段相关推荐
- web页面中如何隐藏js代码的显示。或者说如何不让别人一下子就能看懂我的web代码。
今天在看别人网页页面的时候,在百度搜索结果中的页面中右键查看源代码,发现百度搜索结果就只有两个代码,如下,没出现其他任何代码 <!DOCTYPE html> <!--STATUS O ...
- 在web页面嵌入百度地图(含定点定位)
在web页面嵌入百度地图(含定点定位) 一.操作步骤 二.可能遇到的问题 1.标记图标没有正常显示出来 2.使用到项目中可能遇到的问题 (1)地图内容显示不正常 (2)标注名称的边框显示不正常 三.参 ...
- qt将html加载到资源文件,web页面嵌入到Qt
标签(空格分隔): plug 开发方式:在web环境下开发完成后,将单独页面嵌入到qt中,html.js等文件都作为资源加入到qt工程中 1):1.html页面中引入webchannel库: 其中,w ...
- 解决web页面嵌入多摄像头显示问题
问题描述 当电脑连接有多个摄像头,如果在一个web页面中要同时嵌入显示,该如何实现? 解决方案 javascript中有关于媒体的函数 navigator.mediaDevices.enumerate ...
- Java前后端分离第三方登录_网站前后端分离情况下如何实现QQ微信等第三方登陆-Fun言...
前言 最近在弄第三方登录,实现起来很简单,就是调几个接口获取个人信息即可,详细了解:maven项目整合QQauth2.0第三方登录详细说明,然后因为本网站是前后端分离的,所以不能再回调接口那里直接跳转 ...
- chrome扩展-打造个性化的web页面
今天介绍一下如何开发一款简单的chrome插件 1. 什么是chrome插件 chrome插件也叫chrome扩展.其实chrome插件就是一个以chrome浏览器为宿主运行的一个web程序,因此ch ...
- LiveGBS流媒体平台国标GB/T28181作为下级支持国标级联海康大华宇视华为等第三方国标平台支持对接政务公安内网国标视频平台
LiveGBS流媒体平台国标GB/T28181作为下级支持国标级联海康大华宇视华为等第三方国标平台支持对接政务公安内网国标视频平台 1.什么是GB/T28181级联 2.搭建GB28181国标流媒体平 ...
- 网站前后端分离情况下如何实现QQ微信等第三方登陆
本文转自Fun言网:https://funyan.cn/p/1705.html 前言 最近在弄第三方登录,实现起来很简单,就是调几个接口获取个人信息即可,详细了解:maven项目整合QQauth2.0 ...
- LiveGBS流媒体平台国标GB/T28181功能-作为下级级联到海康大华宇视华为等第三方国标平台同样支持对接政务公安内网国标视频平台
LiveGBS流媒体平台国标GB/T28181功能-作为下级级联到海康大华宇视华为等第三方国标平台同样支持对接政务公安内网国标视频平台 1.什么是GB/T28181级联 2.搭建GB28181国标流媒 ...
最新文章
- 你还在使用 try-catch-finally 关闭资源?
- 【HLSL学习笔记】WPF Shader Effect Library算法解读之[DirectionalBlur]
- [ 搭建Redis本地服务器实践系列三 ] :图解Redis客户端工具连接Redis服务器
- 『原创』用C++开发WM应用系列(6)——深化ListBox控件
- java报错只有一个数字4,Java 报错 illegal Key Size
- Spring接入RabbitMQ
- JSON JsonArray和JsonObject学习资料
- cp1 项目管理概述
- HDU - 4253 Two Famous Companies(二分+最小生成树)
- 【线上分享】云原生时代,华为云音视频质量监控与优化实践
- python网页填表教程_PythonSpot 中文系列教程 · 翻译完成
- 使用Axis2来构建Web Service客户端
- linux msgsend 头文件,Unix/Linux进程间通信
- CS231n李飞飞计算机视觉 迁移学习之物体定位与检测下
- 【eoeAndroid特刊】第一期到第十八期
- 三维空间点到直线距离计算
- NVIDIA vid2vid论文复现
- 病毒常用方法之隐身术
- 亚马逊云科技软件开发工程师团队
- C语言实验——求两个整数之中较大者