如何在React项目中嵌入本地Web游戏应用？

算力阿峰

2026-7-4

React项目嵌入Web游戏的解决办法

核心问题

你用html-loader导入HTML文件后给iframe的src属性赋值，这是错误的——html-loader会把HTML转成字符串，而src需要的是URL，所以才出现地址无效提示；另外inline loader的写法不稳定，导致随机解析报错。

具体解决方案

方案1：静态资源直接引用（推荐）

把micropolisJS整个文件夹复制到React项目的public目录下，比如public/micropolisJS/
组件里直接用静态路径作为iframe的src：

class App extends Component {
  render() {
    return (
      <iframe src="/micropolisJS/index.html" width="100%" height="600px" />
    );
  }
}

这样游戏的样式、精灵图、脚本都能正常加载，因为资源路径保持完整。

方案2：配置html-loader并用srcDoc

如果必须通过import导入HTML：

安装依赖：

npm install html-loader --save-dev

在webpack配置里添加html-loader规则（用Create React App的话需要用craco或react-app-rewired修改配置）：

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: 'html-loader',
      },
    ],
  },
};

组件里改用srcDoc属性传递HTML字符串：

import gameHtml from './micropolisJS/index.html';

class App extends Component {
  render() {
    return (
      <iframe srcDoc={gameHtml} width="100%" height="600px" />
    );
  }
}

注意：游戏内的相对资源路径需要调整，否则样式、图片会加载失败。

方案3：直接嵌入HTML到组件

不用iframe的话，可用dangerouslySetInnerHTML嵌入：

import gameHtml from './micropolisJS/index.html';

class App extends Component {
  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: gameHtml }} />
    );
  }
}