将前端库导入 wix 网站

Posted 2023-03-07

【中文标题】将前端库导入 wix 网站

【英文标题】：Importing frontend libraries into wix website

【发布时间】：2019-05-17 19:26:49

【问题描述】：

我已经使用 CRA 开发了一个 React 应用程序，我正在尝试将它托管在现有的 wix 页面上。使用 WIX，我可以使用 javascript 文件，因此我将我的应用程序代码与依赖项捆绑到一个文件中，并尝试将 react 和 react-dom 代码从其官方 cdn 复制并粘贴到我的目录中。

不知何故它仍然无法正常工作，在 react-dom.js 我看到错误：

'window' is not defined

虽然现在我尝试仅使用 react 和 react-dom 导入，但问题通常适用于将 js 前端库导入 WIX。

我需要将应用程序代码托管在 wix 页面中，但我认为如果我使用 iframe 中的 cdns 添加应用程序依赖项，它应该可以正常工作，有点像this topic 然后使用 wix 语法引用它

let React = $w("#elementid").window.React;

获取 iframe，并从那里获取 React/其他库参考。 iFrame（WIX html 元素）托管在同一来源。

我还可以使用 here 列出的 node.js 代码和 npm 模块

想法？

【参考方案1】：

您不能直接在 Wix 代码页面上使用本机反应代码。

您可以编写 HTML 文档并将其加载到 iframe 元素中，但出于安全原因，代码需要在 iframe 中运行。您可以使用仅 iframe 元素的 postMessage 和 onMessage 函数在 iframe 和 Wix 代码页面之间交换消息。

https://www.wix.com/code/reference/$w.HtmlComponent.html

https://support.wix.com/en/article/wix-code-working-with-the-html-element

只要不尝试直接操作 dom，您就可以包含 nodejs 包（一旦获得批准）。您需要以与 jquery 框架相同的方式来考虑 Wix 代码页面。主页面范围选择器 $w 是页面元素所在的位置。只有在 Wix 编辑器上定义的元素才能通过 $w 范围选择器或相关事件处理程序进行操作。

您可以使用 javascript 直接或通过诸如 react 之类的框架来操作 dom 的唯一方法是使用 htmlComponent 在 iframe 中进行沙盒处理。