可见性变化时，IFrame滚动条在铬上消失
Windows上的Google是否存在呈现iframe滚动条的问题？
我编写了一个非常简单的代码来显示正在发生的事情(至少对我来说是在52.0.2743.82米上)：
<button>Toggle visibility</button>
<br />
<iframe scrolling="yes" seamless src="https://en.wikipedia.org/wiki/Lorem_ipsum" frameborder="0" style="width: 700px; height: 300px"></iframe>
<script type="text/javascript">
$("button").on("click", function() {
$("iframe").toggle();
});
</script>加载页面时，可以看到其滚动条的iframe。
隐藏并显示iframe单击按钮。滚动条消失。
这个问题显然只发生在铬中。
有人也在经历这种事吗？有什么解决办法吗？
回答 7
Stack Overflow用户
发布于 2016-08-09 01:47:14
似乎是在更新Chrome52.0.2743.82 (http://googlechromereleases.blogspot.fr/2016/07/stable-channel-update.html)时出现了bug。
一个可能的解决方法是使用属性visibility和position: absolute，而不是display来显示或隐藏iframe。
此项目存在一个铬缺陷票证：https://bugs.chromium.org/p/chromium/issues/detail?id=641881
Stack Overflow用户
发布于 2016-10-11 14:01:23
我遇到了这个问题，使用visibility而不是display: none不是一种选择。
我的解决方法是在iframe中显示的文档的overflow: scroll上设置overflow: scroll，每当我将iframe设置为再次可见时。这似乎迫使滚动条再次出现在iframe上。然后，您可以将overflow重置为其旧值，滚动条将保留在iframe上。不过，您需要等待重新绘制，然后才能重置overflow，所以我将其设置为延迟为0的超时。
function showIframe(iframe) {
var iframeBody = iframe.contentDocument.body;
$(iframe).show();
var oldOverflow = iframeBody.css("overflow");
iframeBody.css("overflow", "scroll");
window.setTimeout(function () {
iframeBody.css("overflow", oldOverflow);
}, 0);
}不过，如果问题中的iframe不需要滚动，那么在这个解决方案中有一个" flash“滚动条，因此可能值得在需要重新绘制的短暂时刻使用visibility解决方案，以避免闪存。
Stack Overflow用户
发布于 2016-11-27 08:34:20
下面是我为正在构建的应用程序开发的一个解决方案。它在一个基金会选项卡控件中有多个<iframe>元素。
我使用MutationObserver来观察<iframe>的父元素(基金会div.tabs-content div.content元素)何时变成active，然后切换iframe的文档的overflow属性。运行时效果是不可感知的。
我最初想直接observe <iframe>，但是在iframe本身更改display属性时没有引发DOM突变事件，我猜是因为从技术上讲，element.style值不是DOM结构本身的一部分。
这是我的代码(Vanilla.js，没有jQuery)。如果您在应用程序中使用，您将希望将我的可见性检测代码替换为适用于您的文档的代码：
window.addEventListener('DOMContentLoaded', function(e) {
var observer = new MutationObserver( onContentMutated );
var options = { attributes: true, childList: false, characterData: false, subtree: false, attributeFilter: ['class'] };
var iframeContainers = document.querySelectorAll('.tabs-content .content');
for(var i = 0; i < iframeContainers.length; i++) {
observer.observe( iframeContainers[i], options );
}
});
function onContentMutated(mutations) {
for(var i = 0; i < mutations.length; i++) {
var m = mutations[i];
var thisIsNowAnActiveTab = m.target.classList.contains('active');
if( thisIsNowAnActiveTab ) {
// get the corresponding iframe and fiddle with its DOM
var iframes = m.target.getElementsByTagName("iframe");
if( iframes.length == 0 ) continue;
var iframe = iframes[0];
iframe.contentWindow.document.documentElement.style.overflow = 'hidden';
// the timeout is to trigger Chrome to recompute the necessity of the scrollbars, which makes them visible again. Because the timeout period is 0 there should be no visible change to users.
setTimeout( function(s) {
s.overflow = 'auto';
}, 0, iframe.contentWindow.document.documentElement.style );
}
console.log( m.type );
}
}https://stackoverflow.com/questions/38557971
复制相似问题
腾讯云开发者
