如何解决调整iframe的高度,以使滚动条不出现或直接修改滚动条的外观
晚安。
我正在将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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。