如何无需iframe在Wix中添加自定义HTML并使用Wix JavaScript？

Wix确实对iframe内的代码做了隔离限制，不过有几种原生支持的方式可以直接在站点环境中运行自定义代码，无需依赖iframe：

1. 使用Wix Code（Velo）的页面/全局代码 #

直接在Wix编辑器中打开**"代码"**面板，选择对应页面或全局代码区域编写JavaScript。这种代码运行在Wix主页面环境中，可直接调用所有Wix官方API（比如wix-data操作数据库、wix-location控制路由、wix-users管理用户等）。
示例：获取当前用户邮箱

import wixUsers from 'wix-users';

$w.onReady(function () {
  wixUsers.currentUser.getEmail()
    .then(email => {
      console.log("当前用户邮箱：", email);
    })
    .catch(err => {
      console.error(err);
    });
});

2. 注册并使用Web Components自定义元素 #

Wix支持直接在Velo代码中定义Web Components，这类自定义元素运行在主页面上下文，能和Wix API交互：

• 第一步：在页面代码中注册自定义元素

class MyCustomElement extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<div>自定义元素内容，可直接调用Wix API</div>`;
    // 调用Wix窗口API示例
    import wixWindow from 'wix-window';
    wixWindow.getBoundingRect()
      .then(rect => console.log(rect));
  }
}

customElements.define('my-custom-element', MyCustomElement);

• 第二步：在编辑器中添加**"HTML iframe"**组件，在HTML代码中直接使用自定义元素标签（此时iframe仅作为占位，实际元素会挂载到主页面环境）：

<my-custom-element></my-custom-element>

3. 利用站点自定义代码注入工具 #

进入Wix站点的**"设置" > "自定义代码"**，可添加全局或页面级的JS/CSS脚本，这些脚本直接注入到主页面的<head>或<body>中，完全运行在Wix主环境，能直接访问Wix全局对象与API。
示例：添加页面加载时执行的全局脚本

$w.onReady(function() {
  console.log("页面加载完成，可调用任意Wix API");
});

注意事项 #

• 所有非iframe的自定义代码需遵守Wix内容政策，不得包含恶意或违规内容。
• 若需复杂HTML结构，可结合Velo的$w选择器直接操作页面上的原生Wix组件（如动态修改文本、图片、按钮行为等），无需单独编写独立HTML。

内容的提问来源于stack exchange，提问作者Nilesh Bhatia