有些项目中可能会遇到这样的需求, 需要在一个项目中嵌入其他的项目的页面或者功能.并且需要这两个页面之间能够进行交互.

本文主要介绍如何实现这种第三方应用的嵌入, 主要有以下几个方向:

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嵌入优劣势分析

优势:

  1. 完全独立的DOM环境,不会受主页面的样式影响
  2. 完全独立的window,避免和主页面其他脚本冲突
  3. 不需要跨域进行数据请求
  4. 安全, 主页面无法访问和更改iframe的DOM环境

劣势:

  1. iframe增加了http请求次数
  2. iframe标签创建速度较慢 (可参考博客: https://www.cnblogs.com/sharpxiajun/p/4077515.html)
  3. 跨域iframe通信实现繁琐




广告等第三方应用嵌入到web页面方案 之 使用iframe嵌入的更多相关文章

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

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

  2. 海康威视 嵌入到web页面相关问题

    因项目上面需求,接触到了海康威视的设备,要把他嵌入到web页面中,所以就开始了爬坑之路 刚开始不知道如何把设备的页面嵌入到项目的web页面中,直到我遇见了他——“WEB3.0控件开发包V1.0.9_C ...

  3. 第三方页面嵌入到web项目的方案 之 使用iframe嵌入

    有些项目中可能会遇到这样的需求, 需要在一个项目中嵌入其他的项目的页面或者功能.并且需要这两个页面之间能够进行交互. 本文主要介绍如何实现这种第三方应用的嵌入, 主要有以下几个方向: 1.iframe ...

  4. Saiku通过iframe嵌入web页面(六)

    Saiku通过iframe嵌入系统页面 前提: Saiku已安装好,并且配置了数据源,熟练了saiku的基本使用. 一.将整个Saiku嵌入页面 在web项目中,新建index.jsp页面,内容如下: ...

  5. 关于ios原声嵌入web页面的问题

    当在一个界面中既有原生又有web的时候,如果想让上下整体滑动的话,我们怎么确定web的高度呢,下面分享一下我的心得 首先在webView的代理方法中我们可以获取到加载完整个web页面的高度 - (vo ...

  6. 分享到微信微博空间等第三方平台的JS代码

    分享功能有利于传播更多优质的内容,所以在web项目中也是比较常用的.今天就抽空整理下常用的分享平台的JS代码.这些代码可以在对应平台的官方网站上生成,官网上对分享内容的参数也有详尽说明.这里只对常用的 ...

  7. 如何本地测试例如QQ登录等第三方接口

    前言:现在基本是个网站就会集成第三方的一些接口,比如QQ登录.分享等等.但是在开发的时候,尤其是没有这方面经验的开发人员来说,调试流程时会显得迷茫,不知道怎么调试.这里就个人的这方面学习摸索做一个总结 ...

  8. 微信、QQ、新浪微博等第三方登录,你想知道的都在这了(上) 微信、QQ、新浪微博等第三方登录,你想知道的都在这了(下)

    微信.QQ.新浪微博等第三方登录,你想知道的都在这了(上):https://www.jianshu.com/p/133d84042483 微信.QQ.新浪微博等第三方登录,你想知道的都在这了(下):h ...

  9. 如何把Power BI嵌入到Web应用中

    (此文章同时发表在本人微信公众号"dotNET开发经验谈",欢迎右边二维码来关注.) 题记:这篇其实不是一个操作向导了,主要对Power BI的嵌入特性进行探讨. Power BI ...

随机推荐

  1. springMVC简单的一些操作

    SpringMVC的模型-视图-控制器(MVC)框架是围绕一个DispatcherServlet来设计的,这个Servlet会把请求分发给各个处理器进行处理,由DispatcherServlet来统一 ...

  2. python使用随机的163账号发送邮件

    import linecache import smtplib import time import linecache import random #算出txt的行数,163账号_2.txt中,每一 ...

  3. 在Windows Server 2008 R2下搭建jsp环境(二)-JDK的下载安装

    因为服务器上的Tomcat的运行环境需要JDK的支持,所以,掌握JDK的安装与下载和配置是一个重要步骤.   1.首先下载最新的JDK版本.网络上提供了最新版本的JDK下载,如图所示.首先选择&quo ...

  4. MVC项目中怎么浏览html页面

    public class HomeController : Controller { public ActionResult Index() { //return View(); //return R ...

  5. Go 语言之三驾马车

    interface Go是一门面向接口编程的语言,interface的设计自然是重中之重.Go中对于interface设计的巧妙之处就在于空的interface可以被当作"Duck" ...

  6. Java语言 链接Oracle数据库

    package com.tao.pojo; import java.sql.Connection; import java.sql.DriverManager; import java.sql.Pre ...

  7. BZOJ_5249_Luogu_P4364_[2018多省省队联测]_IIIDX_九省联考2018_JLOI2018_线段树

    BZOJ_5249_[2018多省省队联测]IIIDX_线段树 Description [题目背景] Osu听过没?那是Konano最喜欢的一款音乐游戏,而他的梦想就是有一天自己也能做个独特酷炫的音乐 ...

  8. Netty基础系列(1) --linux网路I/O模型

    引言 我一直认为对于java的学习,掌握基础的性价比要远远高于使用框架,而基础知识中对于网络相关知识的掌握也是重中之重.对于一个java程序来说,无论是工作中还是面试,对于Netty的掌握都是及其重要 ...

  9. 如何在招聘中考核.NET架构师

    .NET架构师招聘不如JAVA那么顺利,可以搜索到的.NET架构师可以说是凤毛菱角.当然好的架构师都是需要长期观察和挖角才能得手,如何去招聘到合适的.NET架构师可能是摆在所有求贤者面前的难题.这里的 ...

  10. eShopOnContainers 知多少[9]:Ocelot gateways

    引言 客户端与微服务的通信问题永远是一个绕不开的问题,对于小型微服务应用,客户端与微服务可以使用直连的方式进行通信,但对于对于大型的微服务应用我们将不得不面对以下问题: 如何降低客户端到后台的请求数量 ...