前言
本系列文章旨在讲解如何从零开始搭建前端监控系统。
项目已经开源
项目地址:
- https://github.com/bombayjs/bombayjs (web sdk)
- https://github.com/bombayjs/bombayjs-server (服务端,用于提供api)(未完)
- https://github.com/bombayjs/bombayjs-admin (后台管理系统,可视化数据等)(未完)
您的支持是我们不断前进的动力。
喜欢请start!!!
喜欢请start!!!
喜欢请start!!!
本文是该系列第三篇,重点讲解如何控制iframe的前进后退。
系列文章:
- 从零开始搭建前端监控系统(一)——web探针sdk
- 从零开始搭建前端监控系统(二)——实现圈选(无埋点)k
示例
https://abc-club.github.io/demo/iframe/demo2/
演示
![8204ceadb3673d1c54f3362698cb4189.png](https://i-blog.csdnimg.cn/blog_migrate/4feb2e44cd26acf8108bdb394a429098.jpeg)
源码
https://github.com/abc-club/demo
如果想看跟复杂的例子,可以看bombayjs
的源码
后台截图如下:
![c028220c44377b5f28586488d6e424b1.png](https://i-blog.csdnimg.cn/blog_migrate/cd93155be4756a5c744ced4ebc512cbb.jpeg)
难点
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/free-resources
本篇文章由一文多发平台ArtiPub自动发布