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

前端之家收集整理的这篇文章主要介绍了html – iframe滚动条在Mac上的Chrome中消失前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个完整的页面iframe,但在chrome的滚动条最初加载然后消失,房间在那里,你可以使用它,但它是不可见的.在safari和firefox和chrome在pc上完美的工作,但是在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>包含来自外部网站的整个页面.让我们把它分解成几步.

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上的滚动.大多数时候这是通过手势完成的,而不是滚动条.

如果您想要更多地控制外部内容,请考虑在服务器端加载cURLmodifying the contents with HTML parsers.

原文链接:https://www.f2er.com/html/224447.html

猜你在找的HTML相关文章