删除 iFrame 上的垂直滚动答案

【问题标题】：Remove Vertical Scroll on iFrame删除 iFrame 上的垂直滚动
【发布时间】：2021-11-01 13:56:14
【问题描述】：

在此示例页面的可用职业列表 iframe 中移除垂直滚动时遇到了一些问题。

如果我将 height="1600px" 增加到 height="1700px"，则垂直滚动在桌面上消失，但仍保留在移动设备上。

    <div class="jobs__wrap bg-grey-pattern">
    <div class="jobs__header">
    <h4>Available Careers</h4>
    </div>
    <iframe src="https://demorecruiting.paylocity.com/recruiting/jobs/All/85e4f102-5f4c-4548- 
    b6ca-cc391c862dc5/CPUMMILL" width="100%" height="1600px" style="border:0;" 
    allowfullscreen="no" loading="lazy"></iframe>
    </div>

棘手的是，目前有 16 个空缺职位。该数字会波动，iframe 部分可能会显示少至 2 或 3 个或多至 20 个左右的可用职位......因此 iframe 职位列表部分的高度会减少和增加。

【问题讨论】：

除非其他站点为您提供一些积极的帮助（即，使用 postMessage 或类似的方式将其文档的当前尺寸发送到父页面），否则您无能为力。
您是否有权访问 iframe 内容，或者这是第 3 方 iframe？如果你可以在 iframe 中实现一些代码，也许 iFrame Resizer davidjbradshaw.github.io/iframe-resizer 会是一个解决方案？
发布职位列表、边框颜色和徽标时我们可以访问的唯一内容。

标签： html css iframe

【解决方案1】：

 <div class="jobs__wrap bg-grey-pattern">
    <div class="jobs__header">
    <h4>Available Careers</h4>
    </div>
    <iframe onload="resizeIframe(this)" id="iframe-id" src="https://demorecruiting.paylocity.com/recruiting/jobs/All/85e4f102-5f4c-4548- 
    b6ca-cc391c862dc5/CPUMMILL" width="100%" height="100%" style="border:0;" 
    allowfullscreen="no" loading="lazy"></iframe>
    </div>
<script>

  function resizeIframe(iframe) {
    iframe.height = iframe.contentWindow.document.body.scrollHeight + "px";
  }

</script>

【讨论】：

我尝试将上面的代码与 iframe 脚本一起使用，但不幸的是这不起作用。
您是否在 iFrame 标签中使用了“加载功能”？
Zahar 我做了... 添加到functions.php 的脚本并复制/粘贴您编写的iframe 代码。现在“职业”页面的该部分显示有关未列出职位发布的错误。奇怪，因为我仍然看到“由 Paylocity 提供支持”，这就是工作的来源。所以....我用实时职位发布 URL 更新了 Paylocity URL，现在桌面上的一切看起来都很好，移动设备仍然有滚动和 Firefox。奇怪，因为示例 Paylocity URL 仍然显示工作列表，但在提到的 iframe 中使用时不显示。无论如何....看起来这行得通。非常感谢你！ ——
谢谢 | Kinldy 将我的答案标记为正确答案。