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

最新推荐文章于 2024-08-21 08:44:39 发布

i鲸落

最新推荐文章于 2024-08-21 08:44:39 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/xinye666666/article/details/103682413

版权

主要实现：通过<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.com/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);