oct16/TimeCat

iframe录制时修改iframe的src为另一路径，修改后的页面录制不上

Jerry379 opened this issue · 2 comments

Jerry379 commented 
<!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>
oct16 commented

使用当前的新版本吧： https://unpkg.com/timecatjs

Jerry379 commented

使用当前的新版本吧： https://unpkg.com/timecatjs

好的，新版本是支持的