我正在使用谷歌网站嵌入HTML代码，粘贴代码在“嵌入从网络”窗口。输出的长度是可变的。
- 我希望有一种方法可以动态调整Google Sites用来托管HTML的父
iframe的高度。*
我知道我可以使用谷歌网站的用户界面手动分配更多的空间，不幸的是，内容会根据API的数据而有所不同，因此我无法事先知道高度。目前，每当内容溢出分配的空间时，垂直滚动条就会出现，看起来不太好。
我尝试了以下方法，它只会删除滚动条，而不允许我看到内容：
<script>parent.document.getElementsByTagName('iframe')[0].scrolling="no";</script>示例Google站点位于https://sites.google.com/view/auto-ajust-gsite-embed/home
这是我在上面的示例站点中使用的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
crossorigin="anonymous"
/>
<title>auto adjust google site embed</title>
</head>
<body>
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#flush-collapseOne"
aria-expanded="false"
aria-controls="flush-collapseOne"
>
Accordion Item #1
</button>
</h2>
<div
id="flush-collapseOne"
class="accordion-collapse collapse"
aria-labelledby="flush-headingOne"
data-bs-parent="#accordionFlushExample"
>
<div class="accordion-body">
Placeholder content for this accordion, which is intended to
demonstrate the <code>.accordion-flush</code> class. This is the
first item's accordion body.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#flush-collapseTwo"
aria-expanded="false"
aria-controls="flush-collapseTwo"
>
Accordion Item #2
</button>
</h2>
<div
id="flush-collapseTwo"
class="accordion-collapse collapse"
aria-labelledby="flush-headingTwo"
data-bs-parent="#accordionFlushExample"
>
<div class="accordion-body">
Placeholder content for this accordion, which is intended to
demonstrate the <code>.accordion-flush</code> class. This is the
second item's accordion body. Let's imagine this being filled with
some actual content.
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"
></script>
</body>
</html>
1条答案
按热度按时间wkyowqbh1#
这只是一个技巧，有新的谷歌网站删除垂直滚动条：展开插入的“嵌入〈〉”框的边界。--[详细信息：我将插入的“Embed〈〉”框的边界扩展到大约11”x 7“的大小：水平到右侧的最大值，垂直（向下）到显示器屏幕可见底部的末端。（我停止进一步向下扩展所述框，因为它从屏幕的最底部开始移动非常缓慢）。我认为该框对于我的测试来说足够大。所有测试视图移动的/tablet/monitor都显示滚动条消失。] --（感谢HTML嵌入代码。）