iframe 中的超时导致滚动问题答案

【问题标题】：timeout in iframe causes scroll issuesiframe 中的超时导致滚动问题
【发布时间】：2017-11-03 12:12:57
【问题描述】：

所以我在网站上嵌入了一个 iframe，其中运行了一个简单的秒表。它只不过是一个递归超时。然而，在那里进行的重复 DOM 更改会导致父网站的内容“闪烁”并且内部 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();
});

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

【问题讨论】：

标签： javascript jquery recursion iframe timeout

【解决方案1】：

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

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

答：要么在 iframe 的 html 和 body 上分配 100% 的高度，并使其能够溢出。

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

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

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

【讨论】：