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

Question

我有一个完整的页面iframe,但在chrome中,滚动条最初加载然后消失,房间就在那里,你可以使用它,但它不可见.完美的徒步旅行和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/

Answer 1

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

当您<iframe>从外部网站包含整个页面时,这是一个非常广泛的问题.让我们把它分解为几个步骤.

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

做一个简单的测试

创建一个非常简单的HTML页面,将其放入一个<iframe>,然后在Mac上的Chrome(DEMO)中查看它.

滚动条不会消失.一切似乎都很好.因此,外部网站上的某些内容很可能会导致问题.

调试外部站点

症状是滚动条在消失之前实际显示的时间很短,但页面仍然可滚动.也许JavaScript导致了这个问题？让我们禁用JavaScript并试一试.

事实证明,禁用JavaScript时滚动条不会消失.所以JavaScript加载的东西会导致问题.进一步调试显示flash对象是罪魁祸首.

再做一次测试

创建两个简单的HTML测试页面并向其中一个添加flash对象.将它们放入不同的<iframe>s并进行比较以查看差异.

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

事实证明,具有flash对象的那个没有可见的滚动条.

结论

滚动条不会在正常情况下消失<iframe>,而是具有闪光对象的滚动条.它可能是一个bug,或者它可能是故意的肮脏黑客.许多Flash广告和视频都是在<iframe>s 中提供的,并且其中包含滚动条并不漂亮.

但问题是,您正在为您提供外部内容,<iframe>而这些内容是您无法控制的.

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

也许你可以尽力解决一两个问题,但是外部页面中有很多事情可以在这里和那里打破.人们甚至可以通过JavaScript和HTTP标头的帮助阻止他们的网站被放置<iframe>.只要页面加载,您应该对此感到高兴.不要过多关注消失的滚动条等细节.当页面实际上不可滚动时,只会担心它.你正在谈论在Mac上滚动.大多数情况下,这是通过手势而非滚动条完成的.

如果您确实需要更多地控制外部内容,请考虑使用cURL在服务器端加载它并使用HTML解析器修改内容.