广告等第三方应用嵌入到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嵌入优劣势分析

优势: 

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

劣势: 

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏玄魂工作室

CTF实战2 Web应用构成

https://www.bilibili.com/video/av22207039/

1022
来自专栏月色的自留地

在Mac上使用vs-code快速上手c语言学习(入门文,老鸟退散)

8574
来自专栏极乐技术社区

探究小程序插件

前段时间,微信释放了小程序插件功能。有了它,小程序开发者就可以通过这个功能,强化自身小程序能力;小程序服务提供商也可以用它,为开发者、用户提供强大的小程序功能支...

1270
来自专栏信安之路

Clickjacking简单介绍

今天没有原创文章发了,从乌云知识库里选了一个文章给大家分享一下,不知道这种方式,大家是否能够接我从乌云知识库里选择一些文章给大家分享,请大家给我提出来,我来根据...

830
来自专栏康怀帅的专栏

SSH 隧道与转发内网穿透(转载)

大家都知道 SSH 是一种安全的传输协议,用在连接服务器上比较多。不过其实除了这个功能,它的隧道转发功能更是吸引人。下面是个人根据自己的需求以及在网上查找的资料...

5405
来自专栏杂烩

GitHug备忘 原

作为开源代码库以及版本控制系统,Github拥有140多万开发者用户。随着越来越多的应用程序转移到了云上,Github已经成为了管理软件开发以及发现已有代码的首...

625
来自专栏程序员互动联盟

【专业技术】Windows编程技巧小结

我们在编写程序的时候,常常会需要一些线程的delay函数。这个问题说简单也简单,说复杂也复杂。比如很多人读知道delay直接用Windows的API函数Slee...

3555
来自专栏腾讯Bugly的专栏

《移动端本地 H5 秒开方案探索与实现》

对 APP 里的一些使用 H5 实现的功能模块,一般体验都比原生差,那么怎么提高h5加载速度?优化 h5 体验?

1.2K13
来自专栏前端知识分享

第211天:git和github的区别和使用详解

它是一个源代码管理工具,在一个项目中,凡是由开发人员编写的都算是源代码,源代码有必要管理起来,让源代码可以被追溯,主要记录每次变更了什么,谁主导这次变化。人为的...

1573
来自专栏张戈的专栏

替代crontab,统一定时任务管理系统cronsun简介

摘 要 cronsun 是一个分布式任务系统,单个节点和 Linux 机器上的 crontab 近似。是为了解决多台 Linux  机器上 crontab 任...

1.4K13

扫码关注云+社区