I promised you an example, and that's exactly what we're going to look at.
We've spoken about all these target values, but I know it can get daunting,
and all these "iframes".
Firstly, you can think of an iframe as literally a frame within a document that loads its own HTML,
JavaScript, & CSS.
So it's almost like a page within a page.
That's all an iframe is.
Well, what do we have here in front of me?
This is the index.html file.
I'm going to give you all these files.
You can download them all.
Let me run through very quickly what I've done.
I just didn't want to code it up all with you, because that would have taken, you know, a good 15 minutes
of me discussing and talking while I code.
And, you know, I don't think it's that important.
So anyway, here we go.
Here's the <body> of our page.
We've got a <body>, and then we've got these <iframes>.
Okay, I've got one <iframe> at the top, which I've called leftFrame.
Let me actually just show you what this looks like on the browser.
Let's go to the browser.
This is what it looks like.
So we've got this green column on the left, and then we've got these, kind-of, six frames, these 6 <iframes>.
And I've styled them differently, put different backgrounds, so you can kind of see that they're not
the same <iframe>.
So that's what it looks like.
If we go to our file,
this is how I've coded it.
We've got one frame, the very first one and I've called that leftFrame.
That's that green one,
okay. Then I've got a <div> and I've just wrapped everything with a parent, because I wanted to style
it in a certain way.
I wanted them stacked on top of each other like this.
And then within that, we've got 6 iframes. We've got the very, very top frame -
that's that yellow one, the highest frame.
This is a top iframe.
And then I've examined all the different target value types.
We've got TOP, PARENT, SELF, BLANK and of course that CUSTOM one.
And that's exactly what I've done in our file.
I've defined all these different frames.
If you click on one of them, that's where the styling takes place.
If you can just see itself, there's nothing inserted between the tags, it's just an <iframe> referencing
an HTML file.
If we go and look at that file, it's pretty straightforward.
Here's the <body>.
I've got a heading called "Highest iframe" and a paragraph saying "this is a top iframe".
If we go to our page, this is exactly what we see.
So don't get intimidated.
That's the first iframe.
And then under this yellow one, we've got this TOP one right - target is set to top.
So how does that work?
Well, let's just go to our main file.
And here let's click on this top HTML file.
You can see we've got a <div>, so we've wrapped everything within a container just for styling purposes
and then we've got just two paragraphs.
code: target = "_top"
You can see target equals _top.
And if I go back to the file, we've got an <a> href link.
I'm not using this target attribute in a form.
Remember I said it's most useful when we're not dealing with forms, and a lot of these different value
types,
in order to understand them, we have to work with frames.
So that's why I'm not putting them in a form.
I've put them here in an anchor tag, as you can see.
So the anchor tag is just referencing a new page, and we're telling the browser to give us the response
in a window called top.
And we already know that top means in the top most context, right?
The greatest parent context containing the form, which is the entire window itself.
Okay.
So that's just an example of how we've set it up.
Let's see how it works.
Let's go to the browser and let's look at the different "target" types.
This is the top, right, the target set to top.
And as I mentioned, this is going to open the response in the greatest parent context contained in
the form.
If we click on it, it's the entire window.
It's the entire page.
And this makes sense.
It's pretty much going on top of everything else.
Now we've got parents. And the parent value opens up the response in the immediate parent context, and
in our case, the parent frame is the actual window itself.
So it's basically the same thing as using top.
If we click parent, it's just going to be going over the top because in this case, this is the next
highest parent frame.
Does that make sense?
What about "self"?
What do you think will happen when we click on SELF?
Remember that when target is set to _self, it opens up the response in the same context that's containing
the link or the form or the iframe.
So if we click on SELF, it's going to send the response - that page - only in itself, in the same context
of that iframe.
So that one is super interesting. And I think that drives home the point of what self does and that's
the default behavior.
Remember, I don't want you to get lost in all the detail.
How did we do that?
Well, if we go to our file we can see that this frame here.
That there, is a frame that we've given an ID of frame4. And if we go up to our styling, we've styled
each frame a certain way, with giving it a width and no border,
etc
etc.
But it references this HTML file called self.
If we look at that file, we can see that the link to the new page has an attribute of target set to
_self.
That's all we've done.
Nothing untoward, right?
Let's go back to our browser here.
What about blank?
You'll know already,
and as we discussed, blank opens up a new tab.
It's not that nice for a user, but who knows,
there may be a reason you want to do it one day.
So there we go,
it opens it up in a new tab.
Let's just close that tab.
Custom is quite interesting.
This is that one where you can call the attribute whatever you want to call it. In order to show you
how it works,
we need 2 links.
We need one which opens it up in a new tab, because that's the default behavior when you set it to a
custom name,
okay. So we click on custom, it opens it up in a new page.
So, so far, so good.
It looks like it's blank, right?
But what's interesting, if you click another link with its target set to blank, it's going to open
up a new tab.
See that?
Now we've got 3 tabs open ðŸ˜²! But if we specify the name of the target to match this custom one,
what's going to happen?
Well, it's not going to open up a new tab.
It's just going to override the existing one that's already open.
So if I click it ... how awesome is that?
Nailed it ðŸ˜Ž.
So it literally just overrides a certain, or targets a certain iframe.
And again, don't get lost in all the detail.
How did we do that?
Well, let's look at our custom HTML file.
All we've done is we've defined a link and we've defined the target attribute as "coolFrame".
That's just the name that I made up.
When you define your own custom name, its default approach is to open it in a new tab - done and dusted.
Then we have another anchor tag, don't we, with an href of a new page too.
So a new style of an HTML page.
But this time the target was set to the same name as coolFrame.
How awesome is that?
And that's why we see that the original frame was replaced.
I know it may be a lot to take in, but really if you just stick, you know, let me go back here,
if you just stick with this page, let's refresh.
You can play around and you can start seeing how these work and hopefully it provides a lot more intuitive
sense than just reading text on screens in theory
what they will do. You know, it makes sense that blank opens it up in a new blank tab.
Self opens it up in the self same window.
So, you know, when you start, you know, looking at all these things in action, it starts making
sense. Anyway ...
I hope that's making sense.
I hope I've driven the point home, and I'll see you in the next lecture ðŸ‘‹.