9

我有一个完整的页面 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/

4

5 回答 5

13

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

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

以下示例假设您在 Mac 上使用 Chrome。

做一个简单的测试

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

滚动条不会消失。一切似乎都很好。所以很可能是外部站点上的某些东西导致了问题。

调试外部站点

症状是滚动条在消失之前实际上出现了很短的时间，但页面仍然可以滚动。也许是 JavaScript 导致了这个问题？让我们禁用 JavaScript 并尝试一下。

事实证明，禁用 JavaScript 时滚动条不会消失。所以 JavaScript 加载的东西导致了这个问题。进一步的调试表明 Flash 对象是罪魁祸首。

做另一个测试

创建两个简单的 HTML 测试页面并向其中之一添加一个 flash 对象。把它们放到不同<iframe>的s中，对比一下看看有什么不同。

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

事实证明，带有 flash 对象的那个没有可见的滚动条。

结论

滚动条不会在正常状态下消失<iframe>，而是在带有 flash 对象的情况下消失。这可能是一个错误，也可能是故意的肮脏黑客行为。许多 Flash 广告和视频都在<iframe>s 中提供，并且其中包含滚动条并不漂亮。

但关键是，您正在为您的外部内容提供服务，<iframe>而这些都是您无法控制的。

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

也许您可以尽力解决一两个问题，但是外部页面中发生的许多事情可能会在这里和那里破坏事情。在JavaScript 和 HTTP 标头的帮助下，人们甚至可以防止他们的网站被放置在一个站点中。<iframe>只要页面加载，您就应该对此感到高兴。不要太在意诸如消失的滚动条之类的小细节。仅在页面实际上不可滚动时才担心它。你说的是 Mac 上的滚动。大多数情况下，这是通过手势而不是滚动条来完成的。

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

于 2014-01-01T04:03:31.793 回答
2

下面的代码似乎解决了 Mac 上 Chrome 中的 iframe 滚动条问题。

此修复与 Mac 和 PC 上的 Firefox、Safari 和 Opera 跨浏览器兼容。

jsfiddle

HTML：

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

    <div id="me-content">
        <iframe src="http://tsn.ca" height="100%" width="100%" class="iframeclass"></iframe>
    </div>

CSS：

body,html{height:100%;overflow:hidden;}
        #me-branding-bar{overflow:hidden;z-index:102;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;}

.iframeclass::-webkit-scrollbar {
    width:10px;
}

.iframeclass::-webkit-scrollbar-track {
    -webkit-border-radius:5px;
    border-radius:5px;
    background:rgba(0,0,0,0.02);
}

.iframeclass::-webkit-scrollbar-thumb {
    -webkit-border-radius:5px;
    border-radius:5px;
    background:rgba(0,0,0,0.3);
}

.iframeclass::-webkit-scrollbar-thumb:hover {
    background:rgba(0,0,0,0.3);
}

.iframeclass::-webkit-scrollbar-thumb:window-inactive {
    background:rgba(0,0,0,0.3);
}
于 2014-01-01T21:41:14.547 回答
0 
*{
   margin:0; 
   padding:0;
}
html, body{
   height:100%; 
   width:100%;
}
#me-branding-bar{
   width:100%; 
   height:10%; 
   position:relative; 
   background-color:#ff9900; 
   display:block;
}
#me-content{
   display:block; 
   height:90%; 
   width:100%; 
   position:relative; 
   border:none;
}
#me-content iframe{
   border:none; 
   display:block; 
   overflow:auto;
}
::-webkit-scrollbar{-webkit-appearance: scrollbarthumb-vertical;}

蚂蚁试试那个链接 1 链接 2

jsfiddle

于 2013-12-31T14:05:08.593 回答
0

从您的 html 中删除样式并添加 scrolling="yes" >> http://jsfiddle.net/95Tes/

<!--same code as before just remove your css styles from the html -->
于 2013-12-31T14:22:58.850 回答
0

这段代码可能对你有帮助。我没有mac，所以请不要给任何负面意见，我希望。我想说你在css规则和html样式中没有使用不同的样式。在这里你是这样使用的

<iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0" src="http://www.tsn.ca" style="overflow:visible;height:100%;width:100%;"></iframe>


#me-content iframe{
    border:1px solid #000;
    overflow:scroll;
}

在其他选项卡中查看图像或先保存图像，然后看更清晰！ 在此处输入图像描述

请使用我修改了css和html的这段代码

       <style>
*{
    margin:0px;
    paddinig:0px;
    }

body,html{
    height:100%;
    overflow:hidden;
}
#me-branding-bar{
    overflow:hidden;
    width:100%;
    height:40px;
    position:relative;
    background-color:#ff9900;
}
#clearboth {
   clear:both;
}
#me-content{
    height:calc(100% - 40px);
    width:100%;
    position:relative;
    border:1px solid #ff9900;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
}
#me-content iframe{
    border:1px solid #000;
    overflow:scroll;
    width:100%;
    height:100%;
}

       </style>

这是修改后的html

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

        </div>

        <div id="clearboth"></div>

        <div id="me-content">
            <iframe border="0" frameborder="0" hspace="0" vspace="0" marginheight="0" marginwidth="0"
            src="http://www.tsn.ca"></iframe>
        </div>

希望它会奏效！

于 2013-12-31T16:13:32.957 回答