前言
本系列文章旨在讲解如何从零开始搭建前端监控系统。
项目已经开源
项目地址：
- github.com/bombayjs/bo… (web sdk)
- github.com/bombayjs/bo… (服务端，用于提供api)(未完)
- github.com/bombayjs/bo… （后台管理系统，可视化数据等）（未完）
您的支持是我们不断前进的动力。
喜欢请star!!!
喜欢请star!!!
喜欢请star!!!
本文是该系列第三篇，重点讲解如何控制iframe的前进后退。
系列文章：
示例
repototest.github.io/demo/iframe…
演示
源码
如果想看跟复杂的例子，可以看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>
