base target: browsing contexts: new, current, parent, top, nested
All Browsing contexts explained
The following Browsing contexts are explained and exemplified in the video tutorial below:
- new: a new browsing context, targeted through "_blank" value
- current: current browsing context, targeted through "_self" value
- parent: parent browsing context, targeted through "_parent" value
- top: top browsing context, targeted through "_top" value
- nested: the iframes
Examples
| < | attribute | = | "value(s)" | > | ... | </> | Examples |
|---|---|---|---|---|---|---|---|
| 2. | target | = | _blank, _self, _parent,_top, a valid browsing-context name | < target="_blank"> < target="_self"> < target="_parent"> < target="_top"> ... <> < target="browsing-context_name"> |
Video demonstration browsing contexts
HTML5 browsing contexts Tutorial
| min | video details |
|---|---|
| 00:10 | this video tutorial presents the following browsing contexts: new, current, parent, top, nested |
| 00:10 | new browsing context: |
| 00:28 | adding the base tag in head section |
| 00:33 | "_blank" value targets a new browsing context (new tab or new window depending on your browsing settings) |
| 00:38 | refreshing the page for the changes to be taken into account |
| 00:40 | checking the Page Source code |
| 00:42 | ok, targeted browsing-context: a new one ("_blank") |
| 00:46 | test: click on hyperlinks |
| 00:49 | test result ok: all linked resources open in a new browsing context(a new window in this case) |
| 01:04 | changing browser's settings: open new windows in a new tab instead |
| 01:11 | re-testing |
| 01:11 | test result ok: all linked resources open in a new browsing context(a new tab) |
| 01:26 | current browsing context: target="_self" |
| 01:30 | making the changes in page |
| 01:32 | "_self" value targets the current browsing context (browser's default behavior) |
| 01:34 | refreshing the page for the changes to be taken into account |
| 01:36 | checking the Page Source code |
| 01:39 | ok, targeted browsing-context: the current one ("_self") |
| 01:43 | EXPLANATIONS: hyperlinks inside different browsing contexts |
| 01:46 | e.g. Page1, Page2.. their current browsing-context is the one they are in → the main html page displayed in browser's window |
| 01:53 | e.g. blank1, self1.. their current browsing-context is the one they are in → the iframe included in the main html page |
| 01:59 | e.g. blank2, self2.. their current browsing-context is the one they are in → the small iframe which is included in the html page that represents the source of the page's iframe |
| 02:03 | test: clicking on page hyperlinks |
| 02:05 | test result ok: the hyperlinks open the linked resourcesin the current browsing context: Page1: resource opened inside main window self1: resource opened inside page's iframe self2: resource opened inside the small iframe self1 and self2 hyperlinks open the same page as the source of their iframe, that's why there's no visible difference |
| 02:22 | nested browsing context |
| 02:24 | page's iframe represents a nested browsing context |
| 02:30 | the small iframe displayed inside page's iframe represents also a nested browsing context |
| 02:44 | parent browsing context: target="_parent" |
| 02:47 | making the changes in page |
| 02:49 | "_parent" value targets the parent browsing context |
| 02:52 | refreshing the page for the changes to be taken into account |
| 02:54 | checking the Page Source code |
| 02:56 | ok, targeted browsing-context: the parent one ("_parent") |
| 03:00 | EXPLANATIONS: hyperlinks inside different browsing contexts + test |
| 03:01 | e.g. Page1, Page2.. have no parent browsing-context in which case the current one = the parent one → |
| 03:05 | test: clicking on Page1 hyperlink, the linked resource opens inside the current browsing-context |
| 03:13 | e.g. blank1, self1.. their parent browsing-context is the parent browsing context of the iframe = the main page (main page holds the iframe, so main page is the parent of the iframe element) |
| 03:16 | test1: clicking on parent1 hyperlink, the linked resource opens inside the main page |
| 03:21 | test2: clicking on parent2 hyperlink, the linked resource opens inside main iframe (page's iframe); the big iframe represents the parent of the small iframe |
| 03:39 | top browsing context: target="_top" |
| 03:44 | making the changes in page |
| 03:45 | "_top" value targets the top browsing context |
| 03:49 | refreshing the page |
| 03:51 | checking the Page Source code |
| 03:53 | ok, targeted browsing-context: the top one ("_top") |
| 03:59 | EXPLANATIONS: hyperlinks inside different browsing contexts + test |
| 03:59 | e.g. Page1, Page2.. they are already located on the top browsing-context; in this case the top one = the current one → |
| 04:04 | e.g. blank1, self1.. they are inside the first nested browsing-context; their top browsing context is the main page |
| 04:15 | e.g. blank2, self2.. they are inside the second nested browsing-context; their top browsing context is the main page |