Next.js Discord

Discord Forum

How to edit variables in html file loaded through iframe in React

Unanswered
Chinese Alligator posted this in #help-forum
Open in Discord
Chinese AlligatorOP
I have a html file that I want to load into an iframe that is in a component. I want to be able to change information in the html file via a form (with the useState hook and onChange attribute). In the end I will have a button to copy the contents of the iframe.

<html>
 <div>
   content {changing content} content
 </div>
</html>


How do I establish states in my html file? so that I can change have access to it in my component?

<br />

I have tried utilizing srcDoc and just passing it through a variable: let ans = ".....{statevar 1}..." (i didn't use double quotes) <iframe srcDoc={ans}></iframe> which works, but when I copy the information it copies all the divs and other tags.

I am trying to copy the functionality of this website (https://csg.subaverage.site/) React and NextJS.

Lastly, loading the html file locally doesn't seem to work. I have tried putting it into a public folder but still having issues.

9 Replies

Marchy
Why are you using an iframe?
I’m also confused as to why you’re storing this in an html file.
@Marchy Why are you using an iframe?
Chinese AlligatorOP
I tried reverse engineering the website (linked above). They did it in svelte. I wasn't really sure how to attack the problem and implement this type of functionality.
Marchy
You could just edit the variables and send them to a function that allows you to download the html, if you really need it in HTML. I think they're using an iframe so they can just call window.print() . You could add a print style sheet and hide all the UI, or open a new window that passes the variables to a different route (query params, probably).
Chinese AlligatorOP
would you have an example of something like this implemented?
Marchy
Not off-hand, but there's some examples here. The react portion of it is really just passing the form variables to the template.
https://developer.mozilla.org/en-US/docs/Web/Guide/Printing
Could probably get away with just using the window.open portion and pass the variables to the string literals
With the iframe
var iframe = document.createElement('iframe');
var html = `<body>${somestate}</body>`;
document.body.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html);
iframe.contentWindow.document.close();
Chinese AlligatorOP
Would you recommend a different way to implement this type of functionality? if so, how?