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>
解决方法
这是一个非常广泛的问题,当您的< iframe>包含来自外部网站的整个页面.让我们把它分解成几步.
The following examples assumes that you use Chrome on a Mac.
做一个简单的测试
创建一个非常简单的HTML页面,将其放在< iframe>中,并在Mac上的Chrome(DEMO)中查看.
滚动条不会消失.一切似乎都很好所以很有可能在外部网站上造成问题.
调试外部网站
症状是滚动条实际上会在消失之前很短的时间出现,但是页面仍然是可滚动的.也许JavaScript导致问题？我们禁用JavaScript和try it out.
事实证明,当禁用JavaScript时,滚动条不会消失.所以JavaScript加载的是导致问题的.进一步的调试显示闪存对象是罪魁祸首.
做另一个测试
创建两个简单的HTML测试页面,并将Flash对象添加到其中一个.将它们放入不同的< iframe> s和compare them中才能看到差异.
<object type="application/x-shockwave-flash"></object>
事实证明,一个flash对象没有可见的滚动条.
结论
滚动条不会消失在正常的< iframe>中,而是闪烁的对象.它可能是一个bug,或者它可能是一个故意的肮脏的黑客.许多Flash广告和视频都是以< iframe>的形式提供,并且其中的滚动条不漂亮.
但关键的是,您在< iframe>中提供外部内容这些都是你无法控制的事情.
<iframe src="<?PHP echo $url;?>"></iframe>
也许你可以尽力解决一两个问题,但在外部页面中可能会有几十种情况发生,可以在这里和那里打破这些事情.人们甚至可以在prevent their sites from being placed in an <iframe>中从JavaScript和HTTP标头获得一点帮助.只要页面加载,你应该很高兴.不要太在意细节,如消失的滚动条.只有当页面实际上不可滚动时才担心.你在说Mac上的滚动.大多数时候这是通过手势完成的,而不是滚动条.
如果您想要更多地控制外部内容,请考虑在服务器端加载cURL和modifying the contents with HTML parsers.
