关于html：iframe的水平滚动条，其内容具有溢出-x：隐藏


Horizontal scroll bar for iframe with content that has overflow-x: hidden

我正在使用宽度760px的登录页面，并且需要一个iframe，其中的内容(Flash演示)的宽度为980px。因此，我需要有一个水平滚动条才能查看全部内容。但是，无论我添加什么作为滚动属性(例如，scrolling =" auto / yes"等)，都不会发生任何事情-根本没有水平滚动条。

iframe中显示的页面在源代码中具有以下命令：

1
2
3
4
5
6
7
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    overflow-x: hidden;
}

据我了解，这就是iframe中没有水平滚动条的原因。有什么解决办法吗？

相关讨论

您应该将iframe包裹在一个包含div的容器中，对容器应用固定宽度。

-

的HTML

1
    <iframe></iframe>

-

的CSS

1
2
3
4
5
6
.container {
    width: 980px;
    height: auto;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}
相关讨论

尝试使用javascript更改iFrame(身体/儿童)溢出。

类似的东西：

1
2
3
window.onload=function(){
 document.getElementById(one).setStyles({ 'overflow': 'auto' });
};

也许是这样，不确定哪个将使iframe的内容变得更自然：

1
2
3
4
5
window.onload=function(){
    var frame = document.getElementById('one'),
    frameDoc = frame.contentDocument || frame.contentWindow.document;
    frameDoc.setStyles({ 'overflow': 'auto' });
};
相关讨论

在您的CSS规则中，" body"未指定" width"。如果没有宽度，如果我正确理解，则此类内容将不会在水平方向溢出。它不能比任何东西都"宽"，因为它没有"宽度"，因此也不会溢出。

因此，我将尝试为iFrame中显示的文档正文提供宽度属性。

自然，这可能在某些浏览器中有效，但在其他浏览器中无效。

您应该使用overflow-x：可见。
如果您的内容托管在其他地方，则由于跨域问题而无法更改。

想象一下，如果您拥有一个网站，而其他人想要对您的网站进行iFrame并进行更改(如果您可以更改溢出内容，则可以从字面上更改任何样式，这将是一个巨大的安全漏洞)。这就是为什么你不能这样做的原因。

在Sergio的回答之后，这是我使用jQuery发现同样的问题时所做的事情：

  • 采取iframe
  • 搜索身体
  • 应用不同的溢出属性

$('#iframe').contents().find('body').css('overflow', 'auto');

页面全部加载完毕后，所有这些当然会：

$(document).ready(function() {...});

现在它按预期显示滚动条

提及iframe的宽度和高度

并以iframe

的样式添加overflow-y:hidden; overflow-x:scroll

1
<iframe width="300" height="315" src="http://webstarts.com" frameborder="0" style="overflow-y:hidden; overflow-x:scroll;"></iframe>

这是jsFiddle文件

相关讨论