广告等第三方应用嵌入到web页面方案 之 使用iframe嵌入
有些项目中可能会遇到这样的需求, 需要在一个项目中嵌入其他的项目的页面或者功能.并且需要这两个页面之间能够进行交互.
本文主要介绍如何实现这种第三方应用的嵌入, 主要有以下几个方向:
1.iframe引入第三方应用
2.嵌入js片段
3.封装成SDK
本篇将主要介绍第一种, 通过iframe嵌入第三方页面, 接下来的几篇文章将分别介绍其他两种方式
使用iframe嵌入是目前使用很广泛的一种嵌入方案, 先看几个案例:
一. 使用案例
- 搜狐移动端使用iframe嵌入广告:
- 移动端视频网站使用iframe进行视频嵌入
- 7724小游戏使用iframe嵌入游戏
二. 实现过程
- iframe标签引入第三方页面地址
iframe的src设置为第三方服务器上部署的html页面,并将需要的参数作为URL的一部分传递给该页面
- 获取参数请求数据
第三方页面中,首先获取到URL中的参数,根据参数向服务端发起ajax请求,获得页面需要展示的数据
- 展示页面
根据获取的数据,将页面展示在主页面上
三. 通信方式
由于iframe页面与主页面之间不在同下, 在iframe页面和主页面交互时, 会有跨域问题, 不能使用window.parent直接进行交互,目前跨域通信的方案有以下几种:
- 使用H5的PostMessage
HTML5新增的window.postMessage, 是一种安全的,基于事件的消息API.
- 降级技术
对于低版本浏览器, 不支持PostMessage, 可使用以下降级方案:
1.创建与父页面同源的ifame
2.使用window.name属性
3.通过hash
4.使用 ADdobe Flash 对象
- 使用easyXDM简化跨域
easyXDM是一个经过充分测试的JavaScript库,有如下优点
1.简化了跨域iframe之间的通信,并已经解决了所有的痛点.
2.easyXDM 集成了现有的多种跨域解决方案,针对不同浏览器可以适配最合适的方案
3.可以将原来写死在页面上的 iframe 改为通过 easyXDM.Rpc() 的方式进行加载,从而更灵活的实现iframe嵌入。
下面是easyXDM的github地址: https://github.com/oyvindkinsey/easyXDM#readme
以上跨域通信的具体实现不在此详细介绍.
四. 使用iframe嵌入优劣势分析
优势:
- 完全独立的DOM环境,不会受主页面的样式影响
- 完全独立的window,避免和主页面其他脚本冲突
- 不需要跨域进行数据请求
- 安全, 主页面无法访问和更改iframe的DOM环境
劣势:
- iframe增加了http请求次数
- iframe标签创建速度较慢 (可参考博客: https://www.cnblogs.com/sharpxiajun/p/4077515.html)
- 跨域iframe通信实现繁琐
广告等第三方应用嵌入到web页面方案 之 使用iframe嵌入的更多相关文章
- 广告等第三方应用嵌入到web页面方案 之 使用js片段
在自己的项目中嵌入过广告的朋友们可能都用过百度联盟, 只需要嵌入如下一段js代码片段, 就可以在自己的项目中嵌入广告, 来获得收益. <script type="text javasc ...
- 海康威视 嵌入到web页面相关问题
因项目上面需求,接触到了海康威视的设备,要把他嵌入到web页面中,所以就开始了爬坑之路 刚开始不知道如何把设备的页面嵌入到项目的web页面中,直到我遇见了他——“WEB3.0控件开发包V1.0.9_C ...
- 第三方页面嵌入到web项目的方案 之 使用iframe嵌入
有些项目中可能会遇到这样的需求, 需要在一个项目中嵌入其他的项目的页面或者功能.并且需要这两个页面之间能够进行交互. 本文主要介绍如何实现这种第三方应用的嵌入, 主要有以下几个方向: 1.iframe ...
- Saiku通过iframe嵌入web页面(六)
Saiku通过iframe嵌入系统页面 前提: Saiku已安装好,并且配置了数据源,熟练了saiku的基本使用. 一.将整个Saiku嵌入页面 在web项目中,新建index.jsp页面,内容如下: ...
- 关于ios原声嵌入web页面的问题
当在一个界面中既有原生又有web的时候,如果想让上下整体滑动的话,我们怎么确定web的高度呢,下面分享一下我的心得 首先在webView的代理方法中我们可以获取到加载完整个web页面的高度 - (vo ...
- 分享到微信微博空间等第三方平台的JS代码
分享功能有利于传播更多优质的内容,所以在web项目中也是比较常用的.今天就抽空整理下常用的分享平台的JS代码.这些代码可以在对应平台的官方网站上生成,官网上对分享内容的参数也有详尽说明.这里只对常用的 ...
- 如何本地测试例如QQ登录等第三方接口
前言:现在基本是个网站就会集成第三方的一些接口,比如QQ登录.分享等等.但是在开发的时候,尤其是没有这方面经验的开发人员来说,调试流程时会显得迷茫,不知道怎么调试.这里就个人的这方面学习摸索做一个总结 ...
- 微信、QQ、新浪微博等第三方登录,你想知道的都在这了(上) 微信、QQ、新浪微博等第三方登录,你想知道的都在这了(下)
微信.QQ.新浪微博等第三方登录,你想知道的都在这了(上):https://www.jianshu.com/p/133d84042483 微信.QQ.新浪微博等第三方登录,你想知道的都在这了(下):h ...
- 如何把Power BI嵌入到Web应用中
(此文章同时发表在本人微信公众号"dotNET开发经验谈",欢迎右边二维码来关注.) 题记:这篇其实不是一个操作向导了,主要对Power BI的嵌入特性进行探讨. Power BI ...
随机推荐
- springMVC简单的一些操作
SpringMVC的模型-视图-控制器(MVC)框架是围绕一个DispatcherServlet来设计的,这个Servlet会把请求分发给各个处理器进行处理,由DispatcherServlet来统一 ...
- python使用随机的163账号发送邮件
import linecache import smtplib import time import linecache import random #算出txt的行数,163账号_2.txt中,每一 ...
- 在Windows Server 2008 R2下搭建jsp环境(二)-JDK的下载安装
因为服务器上的Tomcat的运行环境需要JDK的支持,所以,掌握JDK的安装与下载和配置是一个重要步骤. 1.首先下载最新的JDK版本.网络上提供了最新版本的JDK下载,如图所示.首先选择&quo ...
- MVC项目中怎么浏览html页面
public class HomeController : Controller { public ActionResult Index() { //return View(); //return R ...
- Go 语言之三驾马车
interface Go是一门面向接口编程的语言,interface的设计自然是重中之重.Go中对于interface设计的巧妙之处就在于空的interface可以被当作"Duck" ...
- Java语言 链接Oracle数据库
package com.tao.pojo; import java.sql.Connection; import java.sql.DriverManager; import java.sql.Pre ...
- BZOJ_5249_Luogu_P4364_[2018多省省队联测]_IIIDX_九省联考2018_JLOI2018_线段树
BZOJ_5249_[2018多省省队联测]IIIDX_线段树 Description [题目背景] Osu听过没?那是Konano最喜欢的一款音乐游戏,而他的梦想就是有一天自己也能做个独特酷炫的音乐 ...
- Netty基础系列(1) --linux网路I/O模型
引言 我一直认为对于java的学习,掌握基础的性价比要远远高于使用框架,而基础知识中对于网络相关知识的掌握也是重中之重.对于一个java程序来说,无论是工作中还是面试,对于Netty的掌握都是及其重要 ...
- 如何在招聘中考核.NET架构师
.NET架构师招聘不如JAVA那么顺利,可以搜索到的.NET架构师可以说是凤毛菱角.当然好的架构师都是需要长期观察和挖角才能得手,如何去招聘到合适的.NET架构师可能是摆在所有求贤者面前的难题.这里的 ...
- eShopOnContainers 知多少[9]:Ocelot gateways
引言 客户端与微服务的通信问题永远是一个绕不开的问题,对于小型微服务应用,客户端与微服务可以使用直连的方式进行通信,但对于对于大型的微服务应用我们将不得不面对以下问题: 如何降低客户端到后台的请求数量 ...