react项目通过iframe方式引入html页面

项目中会碰到在react项目中引入html静态页面的需求，以下是解决方法：

主要实现：通过<iframe>方式引入，以下是核心代码部分：

import data from './data.html';  // 引入需要引用的html文件

class Data extends Component {
  render() {
    return (
      <iframe
        title="resg"
        srcDoc={data}
        style={{ width: '100%', border: '0px', height: '1100px' }}
        sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
        scrolling="auto"
      />
    );
  }
}

export default withRouter(Data);

注意，因为这里的“data”是整个html文件中的代码并不是路径，所以在iframe中不能用src的方式，而要用srcDoc来代替，详细请百度iframe属性

出现问题：

You may need an appropriate loader to handle this file type.
| <!DOCTYPE html>
| <html lang="en">
| <head>

可能在编译的过程中会出现如上问题，意思是需要合适的loader处理文件类型，在react项目中中没有解析html类型的loader，所以需要我们自己手动添加，解析html文件的loader为html-loader，加在webpack.config.dev.js中，

同时也要安装依赖如下，以下是方法：

npm i html-loader -S

{
   test: /\.html$/,
   use: [
         {
           loader: require.resolve('html-loader')
         }
        ]
},

装好后即可解决问题：

小伙伴们感觉有帮助的话希望点个赞哟，如果有问题或疑问欢迎大家评论区留言，看到后第一时间回复。

方法二：可以不用装html-loader插件，通过把html静态文件转换成字符串，再通过export导出，主要步骤如下：

访问https://c.runoob/front-end/47 将html压缩，挤去掉换行符和空格；

新建html.js文件：

const html = "<!DOCTYPE html><html><head><meta charset="utf-8"><title>iframe</title></head><body><h1>test</h1></body></html>";

export default html;

然后在需要引用的地方引用即可：

import html from './html.js';  // 引入需要引用的js文件

class Data extends Component {
  render() {
    return (
      <iframe
        title="resg"
        srcDoc={html}
        style={{ width: '100%', border: '0px', height: '1100px' }}
        sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
        scrolling="auto"
      />
    );
  }
}

export default withRouter(Data);

更多推荐

react项目通过iframe方式引入html页面