前言

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

项目已经开源

项目地址：

  • 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. 人体行为识别（骨架提取），搭建openpose环境，VS2019(python3.7)+openpose

    这几天开始接触人体行为识别,经过多方对比后,选择了现在最热的人体骨架提取开源库,openpose. 下面就不多说了,直接开始openpose在win10下的配置: 需求如下:1. VS2019    ...

  2. java架构之路-（源码）mybatis基本使用

    我们今天先来简单了解一下我们持久层框架,mybatis的使用.而且现在的注解成为趋势,我主要说一下注解方向的使用吧(配置文件也会说) 从使用角度只要是三个部分,mybatis-config.xml,m ...

  3. 四大组件初始之ContentProvider

    在android中,除了存放在外部存储的共享目录下的数据,各个应用的数据库文件,资源等都是私有的,其他应用没有访问权限.所以有了ContentProvider,不包含功能逻辑,用于不同应用进程间共享数 ...

  4. 【学习笔记】第七章 python3核心技术与实践--输入与输出

    [第六章]思考题答案,仅供参考: # coding:utf-8import time#方法一start_time = time.perf_counter()s = ''for n in range(0 ...

  5. python+selenium一：对浏览器的常规操作

    # 1.打开Firefox浏览器 from selenium import webdriverdriver = webdriver.Firefox()driver.get("https:// ...

  6. Python turtle库绘制简单图形

    一.简介 Python中的turtle库是一个直观有趣的图形绘制函数库.turtle库绘制图形有一个基本框架:一个小海龟在坐标系中爬行,其爬行轨迹形成了绘制图形. 二.简单的图形列举 1.绘制4个不同 ...

  7. poj-2232 New Stone-Forfex-Cloth Game 思维题

    Acm is a clever boy, and he developed a new game form the old Stone-Forfex-Cloth game. In this game, ...

  8. springboot WebMvcConfigurerAdapter替代

    过时应用: @Configuration public class WebMvcConfig extends WebMvcConfigurerAdapter { @Override public vo ...

  9. PHP5.5 mysqli如何连接MySQL数据库和读取数据

    在学习 1. 开启PHP的API支持 (1)首先修改您的php.ini的配置文件.查找下面的语句:;extension=php_mysqli.dll将其修改为:extension=php_mysqli ...

  10. 从React-Native坑中爬出，我记下了这些

    吐槽 如果React-Native是个人,我估计已经想要打死他了... 上一篇文章 当React开发者初次走进React-Native的世界 前言 最近因为业务需要,做了一些关于React-Nativ ...