共计 2133 个字符，预计需要花费 6 分钟才能阅读完成。
前言
本系列文章旨在讲解如何从零开始搭建前端监控系统。
项目已经开源
项目地址：
- https://github.com/bombayjs/b… (web sdk)
- https://github.com/bombayjs/b… (服务端，用于提供 api)(未完)
- https://github.com/bombayjs/b…（后台管理系统，可视化数据等）（未完）
您的支持是我们不断前进的动力。
喜欢请 start!!!
喜欢请 start!!!
喜欢请 start!!!
本文是该系列第三篇，重点讲解如何控制 iframe 的前进后退。
系列文章：
- 从零开始搭建前端监控系统（一）——web 探针 sdk
- 从零开始搭建前端监控系统（二）——实现圈选（无埋点）k
示例
https://abc-club.github.io/de…
演示
源码
https://github.com/abc-club/demo
如果想看跟复杂的例子，可以看 bombayjs 的源码
后台截图如下：
难点
document.getElementById('iframe id').contentWindow.history.back();以上面这种方式控制会存在跨域问题！！！
原理
- 解决 iframe 的跨域问题，我们需要通过 postMessage 实现 iframe 的通信
- 通过 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/f…
正文完
发表至： javascript
2019-10-08
