The next thing we need to figure out is how to take some code that comes out of our bundling process
and get it into that iFrame and execute it.
So I'm going to show you a very simple, straightforward way that we can get some code inside of our
iFrame and run it back inside my code editor.
I'm going to give you a very quick reminder.
Remember, inside of Unclick is where we are building up our bundle.
We get back results.
We then take the result.
We join together all the output files of the bundle.
Technically, there's only ever going to be one.
And then we update a code piece of state inside of our component.
So the output of our bundling process is stored inside of that code.
Piece of state while we are looking at this code, is going to clean up the comment right here.
And in addition, after the state code, we have that temporary attempt right here to execute some code
using eval, we're not using this anymore.
This was kind of a very naive first approach at running code inside the browser.
But as we've learned, there are many, many ways in which it is better to run our code inside of an
iFrame.
We're going to take out that entire try catch block.
Don't need it anymore.
OK, then after that, here's how we're going to get our code into that iframe right above the return
statement, I'm going to add in response to HTML.
Inside that, I'm going to put a script element.
And inside the script element, I'm going to do some interpellation and I'm going to put in that code
piece of St..
The thing about this script tag right here and what is going to eventually be generated, we are taking
the output of our bundling process.
We are placing it into a script element and assigning that to this HTML variable.
We then take HTML and provide it to the iFrame as its source property to the contents of the iFrame,
the actual HTML that exists inside.
There is going to be nothing but a script element with some JavaScript code.
So when the iFrame boots up or loads up, the browser is going to take a look at the inside of it.
It's going to say aha, a script tag, let's find all the code inside that script tag and execute it.
So this should execute our code for us as soon as that iFrame loads up.
Before we test this, I'm going to remove that last little HTML declaration right there that was just
for quick testing purposes.
OK, I'm going to save this look back over the browser, I'm going to refresh and you'll notice just
about right away we now see a little error message up here.
This error message is a very small little gotcha.
Remember, we added on that sandbox property right here to the iFrame itself.
The sandbox property is describing all the things that this iFrame is allowed to do right now by providing
a sandbox of empty string.
We're essentially saying this iFrame has permission to do just about nothing but show very basic HTML
so it is not allowed to run any JavaScript code through scripts.
It is not allowed to create any alerts.
It cannot use physical devices.
There's a whole long list of things that this iFrame is not permitted to do.
So if we want to allow our iFrame to actually run some code that is inside of a script tag, we have
to add in a little attribute to Sandbox.
We're going to add in there.
Allow scripts like so.
So we are now saying to our browser that this iFrame should be allowed to execute a script tag.
That's what this does.
All right, going to save that flip over again, we no longer have that error message, which is good.
Now, I'm going to add in some code to my text area.
I'll do a council log of one.
We're going to click on Submit that should bundle our code, we should get the output that should be
pushed into the iFrame where we should see it executed.
So hopefully we should see a log of one your our console.
Let's try this out.
I'm going to submit and there it is.
Awesome, if you look at the consulate closely, you'll notice from this little link over here, it
is definitely a consular log coming from inside of the iFrame.
That's essentially what that link right there is saying.
We can also change the consul log of one to to submit again.
Again.
Yep, looks like this is definitely working as expected.
OK, so that is pretty much it, we've now got our code being bundled.
We are taking that bundled output, we are pushing it into the iFrame, where it then gets executed.
So this is looking once again really good and we're making fantastic progress here.
Let's take a pause and move on in just a moment.