如何动态调整嵌入WordPress网站的React应用iframe的尺寸？

你选择的iframe-resizer完全适配你的场景，父页面（包括后续的WordPress站点）作为宿主加载父端脚本，iframe内的React应用加载内容端脚本即可实现动态尺寸适配。

你遇到的iFrameResize is not defined报错是基础的资源加载错误，原因是你父页面引入iframeResizer.min.js的script标签属性拼写错误：你写的是scr="./js/iframeResizer.min.js"，正确的属性名是src，拼写错误导致脚本没有正常加载，全局自然找不到对应的方法。

修正后的父页面完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Parent page</title>
    <style>
        iframe {
          width: 1px;
          min-width: 100%;
        }
      </style>
<!-- 修正属性名拼写 -->
<script src="./js/iframeResizer.min.js"></script>
</head>
<body>
    <h1>This is the parent page</h1>
    <iframe src="http://localhost:3000/" id="myIframe" scrolling="no"></iframe>
</body>

<script>
   iFrameResize({ log: true }, '#myIframe')
</script>
</html>

你已经在React应用的index.html中添加了内容端脚本，只需要确认两个点即可：

• 确保iframeResizer.contentWindow.min.js的引用路径正确，建议把该文件放到React项目的public目录下，引用路径改为/iframeResizer.contentWindow.min.js避免相对路径出错
• 该脚本不要做懒加载，要放在index.html的head或者body起始位置，确保页面加载时就能初始化监听逻辑

你当前用纯HTML测试的逻辑完全可以复用，WordPress中添加对应代码有两种常用方案：

• 如果你使用自定义页面模板，直接把iframeResizer.min.js的引入代码加到对应页面模板的head部分，再把iframe代码和初始化脚本放到对应渲染位置即可
• 如果不想修改主题模板，可以直接用WordPress编辑器的自定义HTML区块，先放入iframe代码，再把脚本初始化代码用<script>标签包裹后放在同一区块或者站点全局页脚自定义代码区

• 若父页面和React应用跨域，需要确保两端的域名都在对方的内容安全策略（CSP）允许列表中，否则iframe-resizer的跨域通信会被浏览器拦截
• React应用内部的路由切换、异步内容加载等场景不需要额外适配，内容端脚本会自动监听尺寸变化并通知父页面调整iframe大小

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