尝试使用 iFrameResizer 时，CDN 未向窗口对象添加方法/属性答案

【问题标题】：CDN not adding methods/properties to window object when trying to use iFrameResizer尝试使用 iFrameResizer 时，CDN 未向窗口对象添加方法/属性
【发布时间】：2022-01-13 17:41:40
【问题描述】：

我正在尝试在父站点上使用 iFrameResizer package 并通过 iframe 嵌入基本的反应页面。在家长网站的index.html 中，我添加了以下代码：

<iframe frameborder="0" id="sizetracker" src="http://localhost:3001" width="100%"
    style="position: fixed; z-index: 1000; bottom: 0; right: 0"></iframe>
<script src="https://cdn.jsdelivr.net/npm/iframe-resizer@4.2.11/index.min.js"></script>
<script>
    window.iFrameResize({ log: true }, '#sizetracker') // error thrown here
</script>

我正在使用 cdn 添加包。我已经尝试了来自 unpkg 的 CDN（通过 https://unpkg.com/iframe-resizer@4.3.2/index.js）以及上面我从 js-delivr 获得的 src 属性中的 url。

抛出两个错误：

Uncaught ReferenceError: module is not defined - 这似乎来自 CDN 的 index.js
Uncaught TypeError: window.iFrameResize is not a function - 我猜这是因为上面的失败错误。

如何通过 CDN 正确导入，然后在我的 html 中的 script 标签中使用该 npm 包？

【问题讨论】：

标签： javascript html iframe cdn script

【解决方案1】：

CDN 链接指向了错误的 JS 文件。不要使用来自 jsdelivr 或直接来自 unpkg 的那个。改为使用：https://cdn.jsdelivr.net/npm/iframe-resizer@4.2.11/js/iframeResizer.min.js

【讨论】：