前言

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

项目已经开源

项目地址：

  • 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. asp.net core 使用 NLog日志

    NLog是一个配置灵活的日志记录类库,拥有输出日志到文件.存储入库.发送到udp地址的高级功能 1 添加 nlog nuget包 Nlog和NLog.Web.AspNetCore 安装完成后   2 ...

  2. 玩转 SpringBoot 2 快速整合 | JSP 篇

    前言 JavaServer Pages(JSP)技术使Web开发人员和设计人员能够快速开发和轻松维护利用现有业务系统的信息丰富的动态Web页面. 作为Java技术系列的一部分,JSP技术可以快速开发独 ...

  3. windows平台：查看端口占用情况，请杀死端口对应进程PID

    //查看 netstat -ano | findstr //杀死 taskkill /f /PID

  4. J2EE简单的分页器

    J2EE项目特别是后台管理,或者一部分前台展示数据比较多,通常需要分页把展示折叠在数据区内. 一般有几种方式来实现分页, 一是官方分页插件,二是自己写,三是网上找(类似于第一种) 这里就介绍第二种, ...

  5. Egiht（八种方法）

    Problem Description The 15-puzzle has been around for over 100 years; even if you don't know it by t ...

  6. linux 操作系统级别监控 free命令

    free命令可以查看当前系统内存的使用情况 free -m 以MB为单位 free -k 以KB为单位 free -m 以MB为单位显示系统内存的使用情况,同理,也可以使用-k.-g等其他的单位显示 ...

  7. 使用PrepareStatement

    包结构: 第一步:编写获取连接工具类 package com.atguigu.jdbc; import java.io.IOException; import java.io.InputStream; ...

  8. 学习方法分享：为何一年半就能拿到大厂 offer

    毕竟是聊聊曾经,放一张大学课堂上灵光一现,手写的一个我曾经一直使用的网名 前言 原文地址:Nealyang/personalBlog 讲真,的确是运气,才有机会进大厂.也没想到,那篇一年半工作经验试水 ...

  9. 使用 Jest 进行 Vue 单元测试

    本文介绍:1.vue-cli3下jest环境的搭建2.vue组件基本的测试方法 环境配置 vue-cli3 的插件使安装流程变得格外简单,通过 vue ui 启动可视化管理系统,在插件栏,点击 ‘添加 ...

  10. Properties -IO相关的双列集合类

    IO相关的集合类 java.util.Properties集合 extends hashtable(淘汰) Properties类表示了一个持久的属性集.Properties可保存流中或从流中加载 P ...