Question

我有一个页面包含在另一个域的iframe中。问题是iframe总是加载垂直滚动条。我查看了标记，以下是它们如何包含iFrame：

<iframe class="plugin-frame js-plugin-frame" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="auto" sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-top-navigation" src="https://mydomain/mypage.html"></iframe>

如果我将上述内容更改为：

<iframe class="plugin-frame js-plugin-frame" frameborder="0" marginheight="0" marginwidth="0" width="100%" min-height="600px" sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-top-navigation" src="https://mydomain/mypage.html"></iframe>

它有效。

我可以在页面上做些什么来使其正常工作。我需要摆脱垂直滚动条，无法控制第三方标记。我的iframe标记中是否需要修复此内容？

Answer 1

如果您不想拥有滚动条，但想要允许滚动，可以添加以下CSS（仅适用于WebKit）：

::-webkit-scrollbar {display: none}

如果您不想拥有滚动条但又不想滚动，那么您可以这样做：

body, html { overflow-y: hidden }

由于我假设您只想在页面为iframed时应用这些样式，请使用此JavaScript来完成工作：

if (top != self) {
     var style = document.createElement('style');
     style.type = 'text/css';
     style.innerHTML = '::-webkit-scrollbar {display: none}';
     document.head.appendChild(style);
}

HTML：使iframe高度固定

1 个答案: