<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TimeCat Iframe Demo</title>
<style>
.iframe-container {
margin-top: 20px;
padding-bottom: 20px;
background: white;
border: 3px solid grey;
text-align: center;
}
iframe {
max-width: 100%;
width: 280px;
display: inline-block;
margin: 30px
}
@media only screen and (max-width: 500px) {
iframe {
padding: 0;
}
}
.container {
margin: 20px 0;
padding: 20px;
border: 3px solid grey;
}
number {
margin-left: 10px;
}
h2 {
margin-top: 0;
}
#replay {
border: 1px solid grey;
padding: 2px 10px;
margin: 10px;
color: red;
font-weight: bold;
cursor: pointer;
}
#replay.locked {
color: rgb(205, 203, 203);
border-color: rgb(205, 203, 203);
}
#replay.hide {
visibility: hidden;
}
</style>
</head>
<body>
<!--hidden--><button id="replay" class="locked">Replay</button>
<div class="container">
<h2>Window</h2>
<button>Number ++</button>
<number>0</number>
<div class="iframe-container">
<iframe id="iframe" src="./iframe-1.html" align="top" onload="resizeIframe(this)" frameborder="0"></iframe>
</div>
</div>
<script id="time-cat" src="./timecatjs.min.js"></script>
<script>
function resizeIframe(target) {
target.height = target.contentDocument.documentElement.offsetHeight
}
window.onresize = function () {
setTimeout(() => {
Array.from(window.frames).forEach(frame => {
resizeIframe(frame.frameElement)
})
}, 250)
}
const { record } = timecat
const ctrl = record({
emitter:function(data){
console.log(data);
}
})
const replayButton = document.getElementById('replay')
if (replayButton) {
setTimeout(() => {
replayButton.className = ''
document.getElementById('iframe').src="./iframe-2.html";
}, 5000);
replayButton.addEventListener('click', () => {
if (replayButton.className) {
return
}
replayButton.className = 'hide'
ctrl.unsubscribe()
window.open('replay.html')
})
}
const container = document.querySelector('.container');
const number = container.querySelector('number')
const button = container.querySelector('button')
button.addEventListener('click', () => {
number.innerHTML = Number(number.innerHTML) + 1
})
</script>
</body>
</html>
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent