iframe滚动条在Mac上的Chrome中消失

keeg 发表于 Dev

基格

我有一个整页的iframe，但是在chrome中，滚动条最初加载后消失了，那里有空间，可以使用它，但它不可见。在PC上的safari，firefox和chrome中可以完美地工作，但是在Mac上您可以看到滚动条的状态，但是滚动条本身不见了。

body,html{
    height:100%;
    overflow:hidden;
}
#me-branding-bar{
    overflow:hidden;
    width:100%;
    height:40px;
    position:relative;
    background-color:#ff9900;
}
#me-content{
    height:100%;
    width:100%;
    position:relative;
    border:1px solid #ff9900;
}
#me-content iframe{
    border:1px solid #000;
    overflow:scroll;
}

<div id="me-branding-bar">

</div>

<div id="me-content">
    <iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="<?php echo $url;?>" style="overflow:visible;height:100%;width:100%;" height="100%" width="100%"></iframe>
</div>

http://jsfiddle.net/RYwty/

安东尼

`<iframe>`在Mac上使用Chrome时，为什么滚动条会消失？

当您<iframe>包含外部站点的整个页面时，这是一个相当广泛的问题。让我们将其分解为几个步骤。

^{以下示例假定您在Mac上使用Chrome。}

做一个简单的测试

创建一个非常简单的HTML页面，将其放在中<iframe>，然后在Mac上的Chrome（DEMO）中查看。

滚动条不会消失。一切似乎都很好。因此，很可能是外部站点上的某些原因导致了问题。

调试外部站点

症状是滚动条实际上消失了很短的时间才消失，但是页面仍然可以滚动。也许是JavaScript引起了问题？让我们禁用JavaScript并尝试一下。

事实证明，禁用JavaScript时滚动条不会消失。因此，JavaScript加载的东西会引起问题。进一步的调试表明，闪存对象是罪魁祸首。

再做一次测试

Create two simple HTML test pages and add a flash object to one of them. Put them into different <iframe>s and compare them to see the difference.

<object type="application/x-shockwave-flash"></object>

It turns out the one with a flash object does not have a visible scrollbar.

Conclusion

The scrollbar does not disappear in a normal <iframe>, but the ones with a flash object. It may be a bug, or it may be an intentional dirty hack. Many flash ads and videos are served in <iframe>s and having a scrollbar in them isn't pretty.

But the point is, you are serving external contents in your <iframe> and these are things that you have no control of.

<iframe src="<?php echo $url;?>"></iframe>

Maybe you can try your best to solve an issue or two, but there are dozens of things happening in an external page that can break things here and there. People can even prevent their sites from being placed in an <iframe> with a little help from JavaScript and HTTP headers. As long as the page loads, you should be happy about it. Don't bother too much about minor details like the disappearing scrollbar. Only worry about it when the page isn't actually scrollable. You are talking a scrolling on a Mac. Most of the time this is done by gestures, not scrollbars.

If you do want more control of the external contents, consider loading it on server side with cURL and modifying the contents with HTML parsers.

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-02-5

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章