Render HTML inside a React app using iframe

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="https://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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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"

Method 2

There is an NPM package just for that.
Check out react-iframe.

https://www.npmjs.com/package/react-iframe


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x