All right, let's start to play around with this iframe a little bit and get a better idea of how it
handles stuff like, say, JavaScript execution.
So quick diagram to get us started.
Right now we have one browser window or really browser tab, and that is loading up our indexed HTML
file inside there we are creating an iFrame.
That's what this second little tab here is meant to represent.
And inside that iFrame we can start to write out and execute some amount of JavaScript code.
There are now two different contexts in which we can run JavaScript, we can run JavaScript in the context
of the parent frame or we can run JavaScript in the context of the iFrame.
Let's go back over to our console and see what this really means at a very practical level.
OK, so back inside my council.
I'm going to right out window, not a equals one.
I'm also going to declare a variable.
Of color equals red.
Now, I've declared a property on window and a single variable, I can very easily print photos out
a window, a there's the one and color, there's red.
I have declared this property on window and this variable in the context of the apparent frame or essentially
are indexed HTML document.
This or these two properties, or the one property, I should say, the one property in the one variable
are only accessible to JavaScript running inside the parent frame.
If we were to run some child or some JavaScript inside of the child's brain, it would not have any
visibility to that property or the variable that we just declared.
Let me show you a very practical example of that.
Inside my console, there's little dropdown right here, I'm going to open up that dropdown and then
select test HTML.
Now, whenever we write out some JavaScript and execute it inside of our console, all this JavaScript
will be executed in the context of the iFrame instead.
And in the context of that iFrame, we have no visibility to the property that we just declared or the
variable that we just declared in the parent frame.
So inside of Testori HTML, if I need to try to print out color.
I get color is not defined, and if I try to print out window A, I also get undefined.
I can against what my context back to the parent context now, once again, I can you color in window
A it's a very clearly there's kind of two different worlds of JavaScript.
Right now we have the world of JavaScript for the parent document that's our indexed on file and we've
got the world of JavaScript running inside the iFrame.
Now, depending upon some different configuration settings that we're going to apply to this iFrame,
we can enable some amount of communication between these two different context.
So let's take a look at how we can enable that communication and how it actually works in the next video.