iframe 中的超时导致滚动问题

Question

所以我在网站上嵌入了一个 iframe，其中运行了一个简单的秒表。它无非是递归超时。然而，在那里进行的重复 DOM 更改导致父网站的内容 'flicker' 和内部 iframe 网站跳转到顶部。由于会立即跳转到页面顶部，因此无法在 iframe 内容上滚动。

这个问题似乎只出现在移动浏览器中（在 iOS Safari 10.3.2 中测试），而间隔的持续时间是无关紧要的（仅每秒调用时同样的问题）。

递归超时

$('#starttimer').on('click', function(e) {
    loopTimer = function() {
        setTimeout(function() {
            $('#time').text('change');  /* DOM modifications seem to be the guilty part */
            loopTimer();
        }, 1);
    }
    loopTimer();
});

有没有人遇到过类似的问题，或者有人知道如何解决这个问题吗？

Answer 1

好的，正如我已经提到的，这似乎是重绘 iframe 内容的问题，它只出现在 iOS Safari 浏览器（和移动 Chrome 浏览器）中。

问题是浏览器在以某种方式更改内容后无法重新计算 iframe 的高度。要解决这个错误，我所要做的就是

A: 要么在 iframe 的 html 和主体上分配 100% 的高度并使其能够溢出。

html,
body {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

B: 或使用 javascript 计算外部 iframe 的高度，并在内部内容发生变化时将值作为 inline-style 写入 iframe 元素。

我希望这篇文章对那些为这个 iOS 错误而苦苦挣扎的人有所帮助。干杯。

iframe 中的超时导致滚动问题

timeout in iframe causes scroll issues

javascript

recursion

iframe

jquery

timeout