Render HTML inside a React app using iframe

javascript reactjs iframe

10,313

I faced the same problem. It can be solved by putting the external html files in the public folder along with index.html. This solution works. If the html files are in src folder, it somehow doesn't pick them up and render them.

I am using webpack and babel in the project. If you want a sample project to try it out, try this https://github.com/grommet/grommet-vending Put external files in public folder and put a page in src with iframe in it.

When you are adding the address of file in iframe though, use

src="../App_File.html"

10,313

Sean

I be programmer. I write big things. I like pretty stuff. I have staff. Sad they must be.

Updated on September 14, 2022

Comments

Sean over 1 year
I have a React component that I would like to render some static HTML into. This is a snippet of what my React component looks like:
```
class MyComponent extends Component {
    render() {
        return (
            <div>
                <iframe title="static_html" src="static_html_in_react_project.html"></iframe>
            </div>
        );
    }
}
```
I have just a basic HTML file that looks like this:
```
<html>
    <head>
        <title>HTML</title>
        <script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
    </head>
    <body>
        Do some stuff here
    </body>
</html>
```
However, when I use the React component, it doesn't seem to be working, as it just re-renders the same page inside the iframe. I have placed the static HTML file in public as well as in the same directory as the calling component and it keeps rendering the parent component over and over again.

Anyone have any solution to rendering a static file in an iframe from the same React project?
Sean over 5 years

This is actually doing the same thing as my code above. It's not loading the static html file located in the project, but actually rendering the parent container over and over again.
Devon Kiss over 5 years

Just wanted to post back that I am exploring what works and what doesnt here... this is the article I'm currently reading about react and iframes: medium.com/@ebakhtarov/…
Shafayat Alam over 4 years

This seems to be ineffective in production, any idea how to make it work in the production?