问题描述

晚安。

我正在将Google Docs iframe合并到我创建的HTML代码中。一旦放入内部，通用的白色滚动条就会始终出现，从而破坏了代码的美感。

是否有任何方法可以完全适应iframe的高度，而无需手动进行操作，或者是否可以通过某种方式更改iframe的滚动条以使其适合我的网站？

<iframe width='100%' height='-webkit-fill-available' frameborder='0' scrolling='no' src='https://docs.google.com/document/d/e/2PACX-1vSX7J9qDjadfQ-STxDNcvSdcCjt9swwmkpjnD6NmTSokuinhZ0ey_7vY2ZK_tnar0QLJWqbrqe0_vCx/pub?embedded=true'></iframe>

非常感谢您！

解决方法

隐藏滚动条

不幸的是，除非您可以在标头中指定允许，否则您不能从其他来源的iframe中选择项目。关于如何设置跨域标头，还有更好的答案- Edit cross-domain Iframe content Locally Only

您不应隐藏iframe的滚动条，因为那是用户要使用的滚动条。这样隐藏内容滚动条。

body {
  margin: 0;
  padding: 0;
}

.contentArea {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: scroll;
}

iframe {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
}

.contentArea::-webkit-scrollbar {
  display: none;
}

.contentArea {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

<body>
<div class="contentArea">
  <iframe src="https://ajaymalhotra.in" title="Iframe Example"></iframe>
</div>
</body>

为了与其他浏览器保持可比性，请阅读此内容。 https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

为您的iFrame使用此JS代码段

                        window.addEventListener('message',function(e) {
                          var iframe = document.getElementById('superFrame');
                          var eventName = e.data[0];
                          var height = e.data[1];
                          switch(eventName) {
                            case 'setIframeHeight':
                              iframe.height = height;
                              break;
                          }
                        },false);

<div class="content">
  <iframe id="superFrame" src="" style="width: 100%; border: none;" onload="resizeIframe(this)" scrolling="no"></iframe>
</div>

将此JS代码片段添加到您尝试加载到iframe中的内容的顶部（头部下方）。这样可以确保将iFrame调整为高度的内容。

    <body onLoad="resizeParent();">
  
        <script type="text/javascript">
          function resizeParent() {
            var height = document.getElementsByTagName("html")[0].scrollHeight;
            window.parent.postMessage(["setIframeHeight",height],"*");
          }
        </script>

html iframe javascript scrollbar

调整iframe的高度，以使滚动条不出现或直接修改滚动条的外观

问题描述

解决方法

隐藏滚动条

相关问答