1
00:00:01,220 --> 00:00:05,150
All right, let's start to play around with this iframe a little bit and get a better idea of how it

2
00:00:05,150 --> 00:00:07,580
handles stuff like, say, JavaScript execution.

3
00:00:08,119 --> 00:00:09,610
So quick diagram to get us started.

4
00:00:10,220 --> 00:00:15,680
Right now we have one browser window or really browser tab, and that is loading up our indexed HTML

5
00:00:15,680 --> 00:00:18,540
file inside there we are creating an iFrame.

6
00:00:18,620 --> 00:00:20,750
That's what this second little tab here is meant to represent.

7
00:00:21,350 --> 00:00:26,000
And inside that iFrame we can start to write out and execute some amount of JavaScript code.

8
00:00:26,740 --> 00:00:32,420
There are now two different contexts in which we can run JavaScript, we can run JavaScript in the context

9
00:00:32,420 --> 00:00:37,250
of the parent frame or we can run JavaScript in the context of the iFrame.

10
00:00:37,970 --> 00:00:42,050
Let's go back over to our console and see what this really means at a very practical level.

11
00:00:43,080 --> 00:00:44,970
OK, so back inside my council.

12
00:00:46,800 --> 00:00:50,640
I'm going to right out window, not a equals one.

13
00:00:51,530 --> 00:00:53,420
I'm also going to declare a variable.

14
00:00:55,290 --> 00:00:57,240
Of color equals red.

15
00:00:58,350 --> 00:01:02,850
Now, I've declared a property on window and a single variable, I can very easily print photos out

16
00:01:02,920 --> 00:01:06,420
a window, a there's the one and color, there's red.

17
00:01:07,330 --> 00:01:13,960
I have declared this property on window and this variable in the context of the apparent frame or essentially

18
00:01:13,960 --> 00:01:15,850
are indexed HTML document.

19
00:01:17,000 --> 00:01:21,080
This or these two properties, or the one property, I should say, the one property in the one variable

20
00:01:21,170 --> 00:01:24,880
are only accessible to JavaScript running inside the parent frame.

21
00:01:25,430 --> 00:01:29,990
If we were to run some child or some JavaScript inside of the child's brain, it would not have any

22
00:01:29,990 --> 00:01:33,590
visibility to that property or the variable that we just declared.

23
00:01:34,160 --> 00:01:36,050
Let me show you a very practical example of that.

24
00:01:36,980 --> 00:01:41,810
Inside my console, there's little dropdown right here, I'm going to open up that dropdown and then

25
00:01:41,810 --> 00:01:43,580
select test HTML.

26
00:01:44,390 --> 00:01:49,190
Now, whenever we write out some JavaScript and execute it inside of our console, all this JavaScript

27
00:01:49,190 --> 00:01:52,490
will be executed in the context of the iFrame instead.

28
00:01:53,120 --> 00:01:58,640
And in the context of that iFrame, we have no visibility to the property that we just declared or the

29
00:01:58,640 --> 00:02:00,650
variable that we just declared in the parent frame.

30
00:02:01,750 --> 00:02:05,290
So inside of Testori HTML, if I need to try to print out color.

31
00:02:06,200 --> 00:02:12,170
I get color is not defined, and if I try to print out window A, I also get undefined.

32
00:02:14,060 --> 00:02:20,510
I can against what my context back to the parent context now, once again, I can you color in window

33
00:02:20,750 --> 00:02:24,780
A it's a very clearly there's kind of two different worlds of JavaScript.

34
00:02:24,800 --> 00:02:30,770
Right now we have the world of JavaScript for the parent document that's our indexed on file and we've

35
00:02:30,770 --> 00:02:33,170
got the world of JavaScript running inside the iFrame.

36
00:02:34,520 --> 00:02:38,870
Now, depending upon some different configuration settings that we're going to apply to this iFrame,

37
00:02:39,170 --> 00:02:43,730
we can enable some amount of communication between these two different context.

38
00:02:44,390 --> 00:02:48,800
So let's take a look at how we can enable that communication and how it actually works in the next video.