Let's take a look at how we can reset the contents of that iframe right before we try to execute code
inside of it.
So in general, what we want to do here is a very quick demonstration.
You're going to find my console.
I'm going to do a document query selector of iFrame and we'll find our iFrame right there.
When we select our iFrame, we can then manually set its SIRC dock property, so I'll do source dock
notice that it is lower case dock right there.
And I can stick in some HTML by just assigning a string directly to it.
So, for example, if I try to assign a that will put a sort of a into the iFrame when you assign a
source dock property directly of an iFrame, that's going to essentially reset the contents inside there,
even if you set it to an identical string.
So all you and I really need to do is make sure that maybe right before we start that bundling process,
we're going to update the source dock property of the iFrame manually.
That should reset its contents and do exactly what we want.
All right, so let's give this a shot back inside my editor as a quick reminder, we've got a reference
to the iFrame put together already.
Then down inside of unclick, right before we start our bundling process, I'm going to take a look
at iFrame Current.
I'm going to update its Sarsae property and I'm going to set it to that same HTML string that we have
down here.
I'll say HTML like so.
All right, now, this is totally fine to refer to, even though that string is or that variable is
defined later on down inside of our component, but at present, it kind of feels like we're using this
variable all over the place.
We should eventually do a little bit of code cleanup here.
I remember I had said that this is something that we definitely have to address in general.
We need to make sure that we, you know, organize our code inside this application a little bit better,
because right now everything is just being placed directly inside of our index file.
So we will eventually do some code cleanup.
But right now, let's just continue working on this thing and developing a couple of features.
Having said that, I'm going to save this look back over.
Make sure I do my refresh and now let's try to simulate what might happen if user first accidentally
deletes that div with it right there and then tries to execute some code that makes use of it.
So I'm going to do that elements inspector inside of my HTML document.
So the iFrame.
Yep, that thing definitely exists right there.
If I do a document body that inner HTML and set that to empty string, I can very easily delete that.
Now if I click inside their.
Yep, body is totally deleted.
But now, if I delete that line and replace it with a console log document where he selector of pound
route, I'm going to expect to see a console log of that day with its route, because as soon as I click
on Submit, I should be resetting the contents of the iFrame.
We're then going to bundle this code, execute that code inside the iFrame, and by that point in time
that div should have been recreated inside that body right there.
Technically it's not being recreated inside this body.
PENGELLY The entire HTML document has really been recreated.
OK, so let's try this out on the summit, and sure enough, I do see that once a log of the dead right
there.
I can also inspect this thing again, here is HTML, there's body, yep, it was definitely created.
So now with every execution of code, we are first resetting the contents of the iFrame and then attempting
to do our execution.
So this is definitely a very good improvement.
All right.
So that's pretty much it for the last kind of major thing I wanted to add in.
Let's take a break right here and start working on our next big feature in the next video.