如何在IIFE包裹的iframe-loader.js中导入store.js的状态变量

根据你的浏览器端DOM操作场景，有两种实用方案可以实现需求：

方案一：使用ES模块（推荐） #

这种方式遵循现代前端模块化规范，避免全局变量污染。

1. 让store.js导出状态变量

   // store.js
   // 示例导出一个状态变量，根据你的实际变量名修改
   export const widgetState = { isVisible: false };
   

2. 修改iframe-loader.js为ES模块并导入变量
   保留IIFE的作用域，同时在模块顶部导入目标变量：

   // iframe-loader.js
   import { widgetState } from './store.js';
   
   (() => {
       const script = document.currentScript;
   
       const loadWidget = () => {
           const widget = document.createElement("div");
           const widgetStyle = widget.style;
           // 使用导入的状态变量控制样式
           widgetStyle.display = widgetState.isVisible ? "block" : "none";
           widgetStyle.boxSizing = "border-box";
           widgetStyle.width = "80vw";
           widgetStyle.height = "800px";
           widgetStyle.position = "absolute";
           widgetStyle.bottom = "20px";
           widgetStyle.right = "40px";
           widgetStyle.borderTopRightRadius = "50%";
           widgetStyle.borderTopLeftRadius = "50%";
           widgetStyle.borderBottomLeftRadius = "50%";
           
           // 记得将创建的元素添加到DOM中
           document.body.appendChild(widget);
       };
   
       // 调用函数执行逻辑（原代码未调用，需补充）
       loadWidget();
   })();
   

3. HTML中声明脚本为模块
   在加载iframe-loader.js的标签中添加type="module"：

   <script type="module" src="./iframe-loader.js"></script>
   

方案二：通过全局对象共享（兼容旧环境） #

如果需要兼容不支持ES模块的旧浏览器，可以将状态变量挂载到全局window对象：

1. 修改store.js挂载变量到全局

   // store.js
   window.widgetState = { isVisible: false };
   

2. 在iframe-loader.js的IIFE中直接访问全局变量
   注意要保证store.js在iframe-loader.js之前加载，确保全局变量已初始化：

   (() => {
       const script = document.currentScript;
       // 从全局window获取状态变量
       const widgetState = window.widgetState;
   
       const loadWidget = () => {
           const widget = document.createElement("div");
           const widgetStyle = widget.style;
           widgetStyle.display = widgetState.isVisible ? "block" : "none";
           // 其余样式代码...
           
           document.body.appendChild(widget);
       };
   
       loadWidget();
   })();
   

3. HTML中按顺序引入脚本

   <script src="./store.js"></script>
   <script src="./iframe-loader.js"></script>
   

内容的提问来源于stack exchange，提问作者ar j