I have a react app, that will be embedded as an iframe inside a Wordpress website. The iframe will have dynamic content, hence the size might change. I was wondering if there is any way to do so?
I checked out the iframe-resizer-react but that seems to be a plugin for the react app as the host, whereas my react app is the content and the wordpress is the host for the iframe.
EDIT: At the moment I am trying to embed this React Iframe in a simple html file (havent started the changes on wordpress as I don't have much clue). Trying to use the iframe-resizer pluging, since that seems the most useful.
This is what my host (parent) sample html looks like. Just testing with html, since I figured adding the js on the wordpress should be similar.
<!DOCTYPE html>
<html>
<head>
<title>Parent page</title>
<style>
iframe {
width: 1px;
min-width: 100%;
}
</style>
<script scr="./js/iframeResizer.min.js"></script>
</head>
<body>
<h1>This is the parent page</h1>
<iframe src="http://localhost:3000/" id="myIframe" scrolling="no"></iframe>
</body>
<script>
iFrameResize({ log: true }, '#myIframe')
</script>
</html>
And in the index.html of the react app I have tried to add the following:
<script src="./iframeResizer.contentWindow.min.js"></script>
But this just throws an error on the parent page, test.html:20 Uncaught ReferenceError: iFrameResize is not defined