javascript - 将前端库导入wix网站

Question

我已经使用 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 元素)托管在同一源中。

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

想法？

Answer 1

您不能直接在 Wix 代码页面上使用 native React 代码。

您可以编写 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

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

使用 javascript 直接操作 dom 或通过像 React 这样的框架来操作 dom 的唯一方法是使用 htmlComponent 在 iframe 中沙箱化。