前言

本系列文章旨在讲解如何从零开始搭建前端监控系统。

项目已经开源

项目地址：

  • https://github.com/bombayjs/bombayjs (web sdk)
  • https://github.com/bombayjs/bombayjs-server (服务端，用于提供api)(未完)
  • https://github.com/bombayjs/bombayjs-admin （后台管理系统，可视化数据等）（未完）

您的支持是我们不断前进的动力。

喜欢请start!!!

喜欢请start!!!

喜欢请start!!!

本文是该系列第三篇，重点讲解如何控制iframe的前进后退。

系列文章：

示例

https://abc-club.github.io/demo/iframe/demo2/

演示

源码

https://github.com/abc-club/demo

如果想看跟复杂的例子，可以看bombayjs的源码

后台截图如下：

难点

document.getElementById('iframe id').contentWindow.history.back();

以上面这种方式控制会存在跨域问题！！！

原理

  1. 解决iframe的跨域问题，我们需要通过postMessage实现iframe的通信
  2. 通过window.history.back()和window.history.forward()控制前进后退

实现

index.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div>

    <iframe id='iframe'></iframe>

    <br/>

    url: <span id='url'></span>

    <br/>

    <button id='back' onclick='back()'>back</button>

    <button id='forward' onclick='forward()'>forward</button>

</div>

  <script>

    var url = './iframe.html'

    var div = document.getElementById('url'),

        iframe = document.getElementById('iframe')

    iframe.src = url

    div.innerHTML = url

    window.addEventListener('message', function(event) {

      if (!event.data.url) return

      div.innerHTML = event.data.url;

    }, false)

    function back() {

      iframe.contentWindow.postMessage('back', '*');

    }

    function forward() {

      iframe.contentWindow.postMessage('forward', '*');

    }

  </script>

</body>

</html>

iframe.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

</head>

<body>

  <div>

    <a href='#a'>to #a</a>

    <p>1</p>

    <p>1</p>

    <p>1</p>

    <p>1</p>

    <p>1</p>

    <p>1</p>

    <p>1</p>

    <p>1</p>

    <p>1</p>

    <p>1</p>

    <p>1</p>

    <p id='a'>a</p>

    <p>2</p>

    <p>2</p>

    <p>2</p>

    <p>2</p>

    <p>2</p>

    <p>2</p>

    <p>2</p>

    <p>2</p>

</div>

  <script>

    window.addEventListener('message', function(event) {

      if (event.data === 'back') {

        window.history.back()

      } else {

        window.history.forward()

      }

    }, false)

    window.addEventListener('hashchange', function(event) {

      window.parent.postMessage({

        url: location.href

      }, '*')

      return

    }, false)

  </script>

</body>

</html>

更多资源

https://github.com/abc-club/free-resources

本篇文章由一文多发平台ArtiPub自动发布

从零开始搭建前端监控系统（三）——实现控制iframe前进后退的更多相关文章

  1. 搭建前端监控系统（三）NodeJs服务器部署篇

    ===================================================================== 监控系统预览地址: DEMO地址    GIT代码仓库地址 ...

  2. 搭建前端监控系统（二）JS错误监控篇

    ===================================================================== 前端性能监控系统: DEMO地址    GIT代码仓库地址 ...

  3. 搭建前端监控系统（四）Js截图上报篇

    ===================================================================== 前端监控系统: DEMO地址  GIT代码仓库地址 ==== ...

  4. 搭建前端监控系统（六）JS截屏和录屏篇

    怎样定位前端线上问题,一直以来,都是很头疼的问题,因为它发生于用户的一系列操作之后.错误的原因可能源于机型,网络环境,接口请求,复杂的操作行为等等,在我们想要去解决的时候很难复现出来,自然也就无法解决 ...

  5. 搭建前端监控系统（五）Nodejs怎么搭建消息队列

    怎样定位前端线上问题,一直以来,都是很头疼的问题,因为它发生于用户的一系列操作之后.错误的原因可能源于机型,网络环境,接口请求,复杂的操作行为等等,在我们想要去解决的时候很难复现出来,自然也就无法解决 ...

  6. 前端监控系统（二）JS错误日志收集篇

    前端监控系统 目前已经上线,欢迎使用! 服务器搭建好了,可以着手开发了. 其实前端需要分析的数据有很多,包括,PVUV, 接口请求统计,耗时统计,JS错误统计,用户使用设备统计,用户地域分布,页面用户 ...

  7. Node.js躬行记（4）——自建前端监控系统

    这套前端监控系统用到的技术栈是:React+MongoDB+Node.js+Koa2.将性能和错误量化.因为自己平时喜欢吃菠萝,所以就取名叫菠萝系统.其实在很早以前就有这个想法,当时已经实现了前端的参 ...

  8. 搭建zabbix监控系统详解

    搭建zabbix监控系统详解 文:warren   博文大纲:一.前言 二.zabbix监控架构三.搭建Zabbix监控服务器四.搭建过程中遇到有些服务无法正常启动的解决办法 一.前言 : 要想实时的 ...

  9. 使用monit搭建一个监控系统

    上周用monit搭建或者说定制了一个监控系统,来监控服务器发生事情.当然了主要是监控异常,因为我们的产品属于服务器类型,很多进程都daemon,要不停的运行.我们搭建监控目的不过是出现问题能够及时的知 ...

随机推荐

  1. ZFNet(2013)及可视化的开端

    目录 写在前面 网络架构与动机 特征可视化 其他 参考 博客:blog.shinelee.me | 博客园 | CSDN 写在前面 ZFNet出自论文< Visualizing and Unde ...

  2. Java中关于泛型集合类存储的总结

    集合类存储在任何编程语言中都是很重要的内容,只因有这样的存储数据结构才让我们可以在内存中轻易的操作数据,那么在Java中这些存储类集合结构都有哪些?内部实现是怎么样?有什么用途呢?下面分享一些我的总结 ...

  3. [Pandas] 06 - Data Preprocessing and Cleaning

    From: DBWangGroup 基于该系列代码的实践与补充思考. 补充:特征工程 结合:[Scikit-learn] 4.3. Preprocessing data /* implement */

  4. 5分钟了解Prometheus

    Prometheus(译:普罗米修斯)用领先的开源监控解决方案为你的指标和警报提供动力(赋能). 1.  概述 1.1.  Prometheus是什么? Prometheus是一个开源的系统监控和警报 ...

  5. 开源流媒体Red5-编译和部署

    源码下载地址:https://github.com/Red5/red5-server 使用工具:IntelliJ IDEA 下载源码后直接用IDEA打开,等待全部加载完成后 编译看是否报错,应该没什么 ...

  6. 第八届蓝桥杯java b组第六题

    标题:最大公共子串 最大公共子串长度问题就是:求两个串的所有子串中能够匹配上的最大长度是多少. 比如:"abcdkkk" 和 "baabcdadabc",可以找 ...

  7. 一步步构建.NET Core Web应用程序---基本项目结构

    前言 随着.NET Core日益成熟, 我作为C#&.NET体系中的一份子也加入了.NET Core 这一体系中,随着不断学习, 接触到的各种框架日益庞杂,接下来我会由一个新手的角度把整个基于 ...

  8. 如何在女友卸妆后，正确的找到她？---java中使用反射的小秘密

    故事背景 小白是个程序猿,刚毕业两年,最近交了一个女朋友,是同事介绍的.女朋友和闺蜜住在一起.小白早上很早接到女朋友电话,昨天她的一个文件错放到了他的电脑包,希望他帮忙送到她住的地方,她今天要向她bo ...

  9. JAVA设计模式---单例模式篇

    单例模式(singleton):是JAVA中最简单的一种设计模式,属于创建型模式.所谓单例,就是整个程序有且仅有一个实例. 特点: 构造方法私有化 在本类中实例化一个对象作为本类的属性 对外提供一个访 ...

  10. Redis 主从，哨兵，集群实战

    下载地址及版本说明 Redis 各版本下载地址: http://download.redis.io/releases/ 版本说明:一般来说版本号第二位,偶数是稳定版本,奇数是在开发中的版本 本文基于R ...