前言

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

项目已经开源

项目地址：

  • 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. [币严区块链]数字货币交易所之比特币（BTC）钱包对接 | 自建节点JSON-RPC访问

    BTC钱包对接流程 一.   部署BTC钱包节点 二.   分析BTC钱包的API 三.   通过JSON-RPC访问BTC钱包API 四.   部署测试 一.部署钱包节点 交易平台对接BTC之前,要 ...

  2. Vue2.x-社交网络程序项目的总结

    最近几天一直在学习Vue的课程,通过这个项目进行进一步的学习Vue方面的知识.掌握如何使用Vue搭建前端,如何请求Node.js写好的后端接口. 一.实现前后端连载 首先在后端的文件中  vue  i ...

  3. UGUI_游戏界面开发Demo001

    1.Alt+Stretch:快速拉伸匹配至画布,与父类大小保持一致. 2.Anchors锚点:实现屏幕自适应 图片也可以实现自适应.Target Graphic (目标图),点击的时候,控件的效果用在 ...

  4. 基于DevExpress的SpreadsheetControl实现对Excel的打开、预览、保存、另存为、打印(附源码下载)

    场景 Winform控件-DevExpress18下载安装注册以及在VS中使用: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1 ...

  5. struts2表单提单细节处理

    1. 上传文件 大部分项目避免不了要上传文件. struts2提供了封闭的上传文件的入口, 网络上也存在大量的插件用于网页表单中上传文件. 由于自己习惯用SSH框架, 所以介绍一下struts2中文件 ...

  6. 通过js获取tinymce4.x的值

    问题的引出: 在使用过程中,用传统的js的方法判断tinymce所选textarea(下面直接称textarea)的值是会出现这样的问题的: 在已有输入内容时,首次提交的时候,依然会弹出js写的警告提 ...

  7. 由于找不到opencv_world***d.dl，无法继续执行代码。重新安装程序可能会解决此问题。关于opencv使用imshow函数闪退解决方法等问题

    1.将缺失的文件放到程序根目录的debug中 2.将Debug x64下的附加依赖项改为只有后缀为d.lib的那个库文件,去除另一个,问题就这么解决了,虽然我也不知道加上另一个为什么就会闪退

  8. 深入浅出Mysql索引的那些事儿

    文章来源:公众号:猿人谷 一.索引的作用 一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性能问题,遇到最多的,也是最容易出问题的,还是一些复杂的查询操作,所以查询语句的优 ...

  9. 跟我学SpringCloud | 第十九章：Spring Cloud 组件 Docker 化

    前面的文章<跟我学SpringCloud | 第十八篇:微服务 Docker 化之基础环境>我们介绍了基础环境系统和 JRE 的容器化,这一节我们介绍 Spring Cloud 组件的容器 ...

  10. Python集训营45天—Day07 (面向对象编程进阶)

    目录 1. @property装饰器 2. 魔法方法 3. 类属性和实例属性 4.静态方法和类方法 5. 单继承和多继承 6. 多态 7. del 方法 序言:上个章节我们了解了面向对象的基础知识,这 ...