如何移除动态高度的招聘列表iframe出现的垂直滚动条

方案1：同域场景下自动适配iframe高度（最优） #

如果你的主站域名和iframe加载的招聘页域名满足同域规则，直接用JS监听iframe加载完成后自动获取内容高度赋值，不需要写死高度，完全适配岗位数量动态变化的场景，同时适配桌面、移动端。
相关代码修改如下：
首先修改iframe的HTML，移除固定高度设置：

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

然后添加对应JS代码：

const jobsIframe = document.getElementById('jobsIframe')
// 监听iframe加载完成后同步高度
jobsIframe.addEventListener('load', () => {
  const iframeHeight = jobsIframe.contentWindow.document.documentElement.scrollHeight
  jobsIframe.height = `${iframeHeight}px`
})
// 适配窗口尺寸变化时的高度重计算
window.addEventListener('resize', () => {
  if (jobsIframe) {
    const iframeHeight = jobsIframe.contentWindow.document.documentElement.scrollHeight
    jobsIframe.height = `${iframeHeight}px`
  }
})

方案2：跨域场景下的兼容方案 #

如果主站和招聘页跨域无法直接获取iframe内部DOM，可选择以下两种方式处理：

• CSS兼容方案：强制隐藏滚动条，同时适配岗位数量的波动范围，给iframe设置样式style="border:0; overflow:hidden; min-height: 600px; max-height: 2200px; width: 100%"，同时给父级.jobs__wrap添加样式overflow: hidden，可以覆盖2~20个岗位的高度需求，低岗位数量时不会留过多空白。
• 通信适配方案：如果招聘平台支持postMessage通信，可要求招聘页在内容高度变化时主动向父站发送高度数值，父站接收信息后动态调整iframe高度即可。

问题原因补充 #

你之前固定高度后移动端仍出现滚动条，是因为移动端屏幕宽度窄，岗位列表的文字会自动折行，导致同数量岗位的实际内容高度比桌面端更高，1700px的高度在桌面足够，在移动端就无法覆盖全部内容，动态适配高度可以完全解决该问题。

内容的提问来源于stack exchange，提问作者Webman