跨源嵌入智能搜索栏如何根据用户输入动态调整高度？

开发者阿泽

2026-9-29

解决方案

跨源场景下无法直接读取嵌入元素内部DOM高度，标准解法是通过postMessage实现父子窗口通信完成高度同步，操作步骤如下：

替换嵌入元素为iframe
embed/object元素对跨源通信的支持不如iframe标准，先替换为以下代码：

<iframe id="searchBarIframe" 
        src="http://search-bar.com" 
        style="outline: 1px solid red; border: none; width: 100%;"
        scrolling="no">
</iframe>

配置搜索栏站点侧代码（需可操作search-bar.com的前端代码）
在搜索栏页面加入以下逻辑，每次内容更新时将当前页面高度发送给父窗口：

// 计算当前页面实际内容高度并上报
function reportHeight() {
  const contentHeight = Math.max(
    document.body.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.clientHeight,
    document.documentElement.scrollHeight,
    document.documentElement.offsetHeight
  )
  // 此处*可替换为嵌入搜索栏的站点域名，提升安全性
  window.parent.postMessage({
    type: 'search_bar_height_sync',
    height: contentHeight
  }, '*')
}

// 页面首次加载完成上报高度
window.addEventListener('load', reportHeight)
// 每次搜索结果渲染完成后主动调用reportHeight()即可

配置嵌入页侧代码
在展示搜索栏的页面加入监听逻辑，收到高度消息后动态调整iframe高度：

window.addEventListener('message', (event) => {
  // 校验消息来源，避免恶意请求篡改高度
  if (event.origin !== 'http://search-bar.com') return
  if (event.data?.type === 'search_bar_height_sync') {
    const iframe = document.getElementById('searchBarIframe')
    // 增加5px冗余避免内容被截断
    iframe.style.height = `${event.data.height + 5}px`
  }
})