WEBVTT 0 00:00.630 --> 00:03.240 I promised you an example, and that's exactly what we're going to look at. 1 00:03.270 --> 00:06.870 We've spoken about all these target values, but I know it can get daunting, 2 00:06.870 --> 00:07.950 and all these "iframes". 3 00:07.950 --> 00:16.650 Firstly, you can think of an iframe as literally a frame within a document that loads its own HTML, 4 00:16.650 --> 00:17.760 JavaScript, & CSS. 5 00:17.760 --> 00:19.830 So it's almost like a page within a page. 6 00:19.830 --> 00:21.390 That's all an iframe is. 7 00:21.420 --> 00:22.920 Well, what do we have here in front of me? 8 00:22.920 --> 00:25.200 This is the index.html file. 9 00:25.200 --> 00:26.550 I'm going to give you all these files. 10 00:26.550 --> 00:27.750 You can download them all. 11 00:27.840 --> 00:29.400 Let me run through very quickly what I've done. 12 00:29.400 --> 00:33.600 I just didn't want to code it up all with you, because that would have taken, you know, a good 15 minutes 13 00:33.600 --> 00:35.610 of me discussing and talking while I code. 14 00:35.610 --> 00:38.580 And, you know, I don't think it's that important. 15 00:38.580 --> 00:40.350 So anyway, here we go. 16 00:40.350 --> 00:42.090 Here's the <body> of our page. 17 00:42.090 --> 00:45.240 We've got a <body>, and then we've got these <iframes>. 18 00:45.270 --> 00:49.320 Okay, I've got one <iframe> at the top, which I've called leftFrame. 19 00:49.320 --> 00:51.540 Let me actually just show you what this looks like on the browser. 20 00:52.050 --> 00:52.980 Let's go to the browser. 21 00:53.010 --> 00:54.090 This is what it looks like. 22 00:54.090 --> 01:00.940 So we've got this green column on the left, and then we've got these, kind-of, six frames, these 6 <iframes>. 23 01:00.940 --> 01:04.840 And I've styled them differently, put different backgrounds, so you can kind of see that they're not 24 01:04.840 --> 01:06.130 the same <iframe>. 25 01:06.130 --> 01:07.630 So that's what it looks like. 26 01:07.930 --> 01:08.800 If we go to our file, 27 01:08.800 --> 01:10.000 this is how I've coded it. 28 01:10.030 --> 01:13.240 We've got one frame, the very first one and I've called that leftFrame. 29 01:13.240 --> 01:14.320 That's that green one, 30 01:14.320 --> 01:19.060 okay. Then I've got a <div> and I've just wrapped everything with a parent, because I wanted to style 31 01:19.060 --> 01:20.050 it in a certain way. 32 01:20.050 --> 01:22.270 I wanted them stacked on top of each other like this. 33 01:22.270 --> 01:26.560 And then within that, we've got 6 iframes. We've got the very, very top frame - 34 01:26.560 --> 01:28.450 that's that yellow one, the highest frame. 35 01:28.450 --> 01:30.130 This is a top iframe. 36 01:30.250 --> 01:34.600 And then I've examined all the different target value types. 37 01:34.600 --> 01:37.900 We've got TOP, PARENT, SELF, BLANK and of course that CUSTOM one. 38 01:37.900 --> 01:39.670 And that's exactly what I've done in our file. 39 01:39.670 --> 01:41.770 I've defined all these different frames. 40 01:41.770 --> 01:45.520 If you click on one of them, that's where the styling takes place. 41 01:45.550 --> 01:51.580 If you can just see itself, there's nothing inserted between the tags, it's just an <iframe> referencing 42 01:51.580 --> 01:52.720 an HTML file. 43 01:52.720 --> 01:56.380 If we go and look at that file, it's pretty straightforward. 44 01:56.410 --> 01:57.400 Here's the <body>. 45 01:57.430 --> 02:02.230 I've got a heading called "Highest iframe" and a paragraph saying "this is a top iframe". 46 02:02.320 --> 02:05.350 If we go to our page, this is exactly what we see. 47 02:05.770 --> 02:07.330 So don't get intimidated. 48 02:07.360 --> 02:08.620 That's the first iframe. 49 02:08.620 --> 02:12.640 And then under this yellow one, we've got this TOP one right - target is set to top. 50 02:12.640 --> 02:13.690 So how does that work? 51 02:13.690 --> 02:16.420 Well, let's just go to our main file. 52 02:16.420 --> 02:20.170 And here let's click on this top HTML file. 53 02:20.260 --> 02:26.350 You can see we've got a <div>, so we've wrapped everything within a container just for styling purposes 54 02:26.350 --> 02:27.850 and then we've got just two paragraphs. 55 02:27.850 --> 02:29.110 code: target = "_top" 56 02:29.140 --> 02:30.580 You can see target equals _top. 57 02:30.580 --> 02:33.340 And if I go back to the file, we've got an <a> href link. 58 02:33.700 --> 02:36.160 I'm not using this target attribute in a form. 59 02:36.160 --> 02:40.330 Remember I said it's most useful when we're not dealing with forms, and a lot of these different value 60 02:40.330 --> 02:40.810 types, 61 02:40.810 --> 02:43.780 in order to understand them, we have to work with frames. 62 02:43.780 --> 02:45.760 So that's why I'm not putting them in a form. 63 02:45.760 --> 02:48.640 I've put them here in an anchor tag, as you can see. 64 02:48.640 --> 02:55.210 So the anchor tag is just referencing a new page, and we're telling the browser to give us the response 65 02:55.210 --> 02:58.210 in a window called top. 66 02:58.210 --> 03:02.500 And we already know that top means in the top most context, right? 67 03:02.530 --> 03:07.570 The greatest parent context containing the form, which is the entire window itself. 68 03:07.570 --> 03:08.080 Okay. 69 03:08.080 --> 03:10.390 So that's just an example of how we've set it up. 70 03:10.390 --> 03:11.980 Let's see how it works. 71 03:11.980 --> 03:15.160 Let's go to the browser and let's look at the different "target" types. 72 03:15.160 --> 03:18.490 This is the top, right, the target set to top. 73 03:19.090 --> 03:24.400 And as I mentioned, this is going to open the response in the greatest parent context contained in 74 03:24.400 --> 03:25.000 the form. 75 03:25.300 --> 03:27.610 If we click on it, it's the entire window. 76 03:27.610 --> 03:28.660 It's the entire page. 77 03:28.660 --> 03:29.620 And this makes sense. 78 03:29.620 --> 03:32.680 It's pretty much going on top of everything else. 79 03:32.710 --> 03:41.740 Now we've got parents. And the parent value opens up the response in the immediate parent context, and 80 03:41.740 --> 03:45.640 in our case, the parent frame is the actual window itself. 81 03:45.640 --> 03:48.340 So it's basically the same thing as using top. 82 03:48.340 --> 03:53.110 If we click parent, it's just going to be going over the top because in this case, this is the next 83 03:53.110 --> 03:54.970 highest parent frame. 84 03:55.540 --> 03:56.430 Does that make sense? 85 03:56.440 --> 03:57.820 What about "self"? 86 03:58.090 --> 04:00.520 What do you think will happen when we click on SELF? 87 04:00.520 --> 04:08.410 Remember that when target is set to _self, it opens up the response in the same context that's containing 88 04:08.410 --> 04:11.110 the link or the form or the iframe. 89 04:11.110 --> 04:19.450 So if we click on SELF, it's going to send the response - that page - only in itself, in the same context 90 04:19.450 --> 04:20.410 of that iframe. 91 04:20.410 --> 04:24.850 So that one is super interesting. And I think that drives home the point of what self does and that's 92 04:24.850 --> 04:25.750 the default behavior. 93 04:25.750 --> 04:28.060 Remember, I don't want you to get lost in all the detail. 94 04:28.090 --> 04:29.110 How did we do that? 95 04:29.140 --> 04:32.680 Well, if we go to our file we can see that this frame here. 96 04:34.020 --> 04:41.700 That there, is a frame that we've given an ID of frame4. And if we go up to our styling, we've styled 97 04:41.700 --> 04:44.610 each frame a certain way, with giving it a width and no border, 98 04:44.610 --> 04:44.970 etc 99 04:44.970 --> 04:45.690 etc. 100 04:46.530 --> 04:49.940 But it references this HTML file called self. 101 04:49.950 --> 04:57.330 If we look at that file, we can see that the link to the new page has an attribute of target set to 102 04:57.330 --> 04:57.930 _self. 103 04:57.960 --> 04:58.850 That's all we've done. 104 04:58.860 --> 05:00.720 Nothing untoward, right? 105 05:01.080 --> 05:03.010 Let's go back to our browser here. 106 05:03.030 --> 05:04.080 What about blank? 107 05:04.110 --> 05:05.130 You'll know already, 108 05:05.220 --> 05:08.070 and as we discussed, blank opens up a new tab. 109 05:08.190 --> 05:10.440 It's not that nice for a user, but who knows, 110 05:10.440 --> 05:12.510 there may be a reason you want to do it one day. 111 05:12.540 --> 05:13.200 So there we go, 112 05:13.230 --> 05:14.930 it opens it up in a new tab. 113 05:15.180 --> 05:16.370 Let's just close that tab. 114 05:16.380 --> 05:17.490 Custom is quite interesting. 115 05:17.490 --> 05:21.810 This is that one where you can call the attribute whatever you want to call it. In order to show you 116 05:21.810 --> 05:22.530 how it works, 117 05:22.530 --> 05:23.400 we need 2 links. 118 05:23.400 --> 05:29.100 We need one which opens it up in a new tab, because that's the default behavior when you set it to a 119 05:29.100 --> 05:29.910 custom name, 120 05:29.910 --> 05:33.570 okay. So we click on custom, it opens it up in a new page. 121 05:33.570 --> 05:35.430 So, so far, so good. 122 05:35.430 --> 05:37.200 It looks like it's blank, right? 123 05:37.200 --> 05:44.070 But what's interesting, if you click another link with its target set to blank, it's going to open 124 05:44.070 --> 05:46.320 up a new tab. 125 05:46.320 --> 05:46.950 See that? 126 05:46.950 --> 05:53.940 Now we've got 3 tabs open 😲! But if we specify the name of the target to match this custom one, 127 05:53.940 --> 05:55.140 what's going to happen? 128 05:55.170 --> 05:57.030 Well, it's not going to open up a new tab. 129 05:57.030 --> 05:59.910 It's just going to override the existing one that's already open. 130 05:59.910 --> 06:03.030 So if I click it ... how awesome is that? 131 06:03.060 --> 06:03.540 Nailed it 😎. 132 06:03.540 --> 06:08.880 So it literally just overrides a certain, or targets a certain iframe. 133 06:08.880 --> 06:10.860 And again, don't get lost in all the detail. 134 06:10.890 --> 06:11.610 How did we do that? 135 06:11.610 --> 06:13.770 Well, let's look at our custom HTML file. 136 06:13.770 --> 06:19.650 All we've done is we've defined a link and we've defined the target attribute as "coolFrame". 137 06:19.650 --> 06:21.510 That's just the name that I made up. 138 06:21.690 --> 06:28.320 When you define your own custom name, its default approach is to open it in a new tab - done and dusted. 139 06:28.350 --> 06:31.920 Then we have another anchor tag, don't we, with an href of a new page too. 140 06:31.950 --> 06:34.530 So a new style of an HTML page. 141 06:34.530 --> 06:37.710 But this time the target was set to the same name as coolFrame. 142 06:38.370 --> 06:39.480 How awesome is that? 143 06:39.480 --> 06:43.290 And that's why we see that the original frame was replaced. 144 06:43.470 --> 06:48.070 I know it may be a lot to take in, but really if you just stick, you know, let me go back here, 145 06:48.070 --> 06:50.800 if you just stick with this page, let's refresh. 146 06:51.460 --> 06:56.530 You can play around and you can start seeing how these work and hopefully it provides a lot more intuitive 147 06:56.530 --> 06:59.540 sense than just reading text on screens in theory 148 06:59.560 --> 07:04.000 what they will do. You know, it makes sense that blank opens it up in a new blank tab. 149 07:04.030 --> 07:06.700 Self opens it up in the self same window. 150 07:06.700 --> 07:10.450 So, you know, when you start, you know, looking at all these things in action, it starts making 151 07:10.450 --> 07:11.530 sense. Anyway ... 152 07:11.530 --> 07:12.400 I hope that's making sense. 153 07:12.400 --> 07:15.910 I hope I've driven the point home, and I'll see you in the next lecture 👋.