NextJS项目跨域iframe动态高度自适应实现问题求助

第一步：修复NextJS子项目的脚本加载逻辑 #

iframeResizer.contentWindow.min.js加载异常90%的场景是NextJS的客户端渲染/ hydration特性和硬编码script标签的时序冲突导致，不要直接在页面head中写入script标签引入该脚本，改用NextJS官方提供的Script组件加载，指定加载策略避免时序问题：

App Router 配置示例 #

// app/layout.js
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <Script
        src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.9/iframeResizer.contentWindow.min.js"
        strategy="afterInteractive"
        crossOrigin="anonymous"
      />
    </html>
  )
}

Pages Router 配置示例 #

// pages/_app.js
import Script from 'next/script'

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.9/iframeResizer.contentWindow.min.js"
        strategy="afterInteractive"
        crossOrigin="anonymous"
      />
    </>
  )
}

不要使用beforeInteractive加载策略，会导致脚本在NextJS hydration完成前加载，无法正确挂载到window对象触发异常

第二步：校验跨域配置（父子页面不同域时必须配置） #

浏览器跨域策略会拦截不同域下iframe的父子通信，需要在NextJS子项目的响应头中添加CSP规则，允许父页面嵌入、允许脚本资源加载：

• Vercel部署可直接在根目录vercel.json中添加配置：

{
  "headers": [
    {
      "source": "/:path*",
      "headers": [
        {
          "key": "Content-Security-Policy",
          "value": "frame-ancestors 'self' 替换为你的父页面实际域名; script-src 'self' 'unsafe-inline' cdnjs.cloudflare.com;"
        }
      ]
    }
  ]
}

• 自定义Node服务可直接在服务响应头中添加对应CSP规则即可。

第三步：父页面iframe配置校验 #

父页面使用iframe-resizer-react时按以下配置适配动态高度场景：

import IframeResizer from 'iframe-resizer-react'

function ParentPage() {
  return (
    <IframeResizer
      src="替换为你的NextJS子项目访问地址"
      style={{ width: '1px', minWidth: '100%', border: 'none' }}
      scrolling="no"
      heightCalculationMethod="lowestElement"
      onResized={({ height }) => console.log('iframe高度已更新', height)}
    />
  )
}

heightCalculationMethod指定为lowestElement比默认配置适配性更好，可捕获动态新增/删除元素带来的高度变化

异常快速排查 #

如果仍然出现加载异常，按顺序排查即可：

• 打开NextJS子页面控制台，输入window.iFrameResizer，返回undefined则说明脚本未正常加载，检查资源地址是否可访问、是否被CSP规则拦截
• 打开父页面控制台，查看是否有跨域相关报错，确认子项目CSP配置的父域名是否正确
• 临时关闭NextJS严格模式验证，部分版本严格模式会导致脚本重复加载触发冲突

内容的提问来源于stack exchange，提问作者Jtaw Cañada