前言

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

项目已经开源

项目地址：

  • 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. 服务器替换san存储

    1.通知DBA停库: 串行登陆服务器 2.备份系统信息 mkdir -p /bakinfo df -h > /bakinfo/df.txt_`date +%Y%m%d%H%M%S` ps -ef ...

  2. hbase shell命令及Java接口介绍

    一. shell命令 1. 进入hbase命令行  ./hbase shell 2. 显示hbase中的表  list3. 创建user表,包含info.data两个列族create 'user', ...

  3. 使用JAVA API获取hadoop集群的FileSystem

    所需要配置的参数:  Configuration conf = new Configuration();   conf.set("fs.defaultFS", "hdfs ...

  4. 运行pytest，报错"AttributeError: 'module' object has no attribute 'xxx'"

    最近学习pytest被此问题困扰,敲脑壳,实在是不该.百度解决方法一大堆,我的问题怎么也解决不了,来看一下,我是怎么解决的,各位大佬勿喷,只是自己做笔记用,谢谢. 报错信息如下: 网上解决方法是这样的 ...

  5. 6.Sentinel源码分析—Sentinel是如何动态加载配置限流的？

    Sentinel源码解析系列: 1.Sentinel源码分析-FlowRuleManager加载规则做了什么? 2. Sentinel源码分析-Sentinel是如何进行流量统计的? 3. Senti ...

  6. ASP.NET Core 2.2 : 二十三. 深入聊一聊配置的内部处理机制

    上一章介绍了配置的多种数据源被注册.加载和获取的过程,本节看一下这个过程系统是如何实现的.(ASP.NET Core 系列目录) 一.数据源的注册 在上一节介绍的数据源设置中,appsettings. ...

  7. php接受的post数据类型

    通常情况下用户使用浏览器网页表单向服务器post提交数据,我们使用PHP的$_POST接收用户POST到服务器的数据,并进行适当的处理.但有些情况下,如用户使用客户端软件向服务端php程序发送post ...

  8. 三段式有限状态机Verilog代码

    状态机由状态寄存器和组合逻辑电路构成,能够根据控制信号按照预先设定的状态进行状态转移,是协调相关信号动作.完成特定操作的控制中心.有限状态机简写为FSM(Finite State Machine),主 ...

  9. 安装pytest-allure-adaptor后，运行报错：AttributeError: module 'pytest' has no attribute 'allure'

    ​ 原因:因为pytest-allure-adaptor库基本被python3放弃了,运行很不友好,反正我运行就是报错 解决方法: 先卸载:pip uninstall pytest-allure-ad ...

  10. 分布式session共享机制分析

    使用配置: 1.在pom文件中引入spring-session的jar包 <!--springsession--><dependency><groupId>org. ...