Frame (World Wide Web)

Last updated

In the context of a web browser, a frame is a part of a web page or browser window which displays content independent of its container, with the ability to load content independently. The HTML or media elements in a frame may come from a web site distinct from the site providing the enclosing content. This practice, known as framing, [1] is today often regarded as a violation of same-origin policy.

Contents

In HTML, a frameset is a group of named frames to which web pages and media can be directed; an iframe provides for a frame to be placed inside the body of a document.

Since the early 2000s, concern for usability and accessibility has motivated diminished use of framesets and the HTML5 standard does not support them.

Tags and attributes

The frames in HTML are created using the <frameset></frameset> tag pair. The <frameset> tag is a container tag for all other tags that are used to create frames. The <frameset> tag replaces the <body> tag in frameset documents.The <frameset> tag defines how to divide the window into frames.

Each frameset defines a set of rows or columns.  If user define frames by using the rows attribute then horizontal frames are created. If user define frames by using cols then vertical frames are created.

The <noframes> element may be included so web browsers with frames disabled (or browsers that do not support frames) can display something to the user, as in this example:

<framesetcols="85%, 15%"><framesrc="http://www.example.com/frame_1.html"name="frame_1"><framesrc="http://alt.example.com/frame_2.html"name="frame_2"><noframes>     Your browser does not support frames.      <ahref="http://www.example.com/frame_1.html">Click here</a> to view frame 1.      <ahref="http://alt.example.com/frame_2.html">Click here</a> for frame 2.   </noframes></frameset>

Framesets have a border attribute. If set to an integer greater than 0, the user can resize the frames by dragging this border, unless a noresize attribute is present in a frame element. If border is set to 0, no border will be displayed and content in different frames will abut each other without delineation.

The iframe element is used inline within a normal HTML body, and defines the initial content and name similarly to the frame element. Any text inside an <iframe></iframe> tag pair will be displayed in browsers that do not understand the iframe tag.

<iframesrc="http://www.example.com/frame_1.html"height="480"width="640">     Your browser does not support iframes. <ahref="http://www.example.com/frame_1.html">Click here</a> to view the content. </iframe>

History

Netscape Navigator 2.0 introduced the elements used for frames in March 1996. Other browser vendors such as Apple with Cyberdog followed later that year. [2] At that time, Netscape proposed frames to the World Wide Web Consortium (W3C) for inclusion in the HTML 3.0 standard. [3]

Frames were used to display and navigate early online magazines and web apps, such as webmail services and web chat sites. Frames had the advantage of allowing elements to be displayed sitewide without requiring server features such as server-side includes or CGI support. These features were not common on early web servers accessible to the public.

Early websites often used a frame at the top to display a banner which could not be scrolled away. These banner frames sometimes included the site's logo as well as advertising. [4]

XHTML 1.1, the intended successor to HTML 4, removed all frames. XFrames, the intended eventual replacement, [5] provided the composite URI to address a populated frameset.

The later HTML5 standard removed framesets by means differing from XHTML. [6] The iframe element remains with a number of "sandboxing" options intended for sharing content between sites. [7]

Advantages

By allowing content to be loaded and navigated independently, frames offered several advantages over the plain HTML in use when they were first developed:

[9]

Criticism

The practice of framing HTML content led to numerous criticisms, most centering on usability and accessibility concerns. These include:

Security

Frames create both technical and user-interface difficulties for enforcement of the same-origin policy. As an example of the latter, an outer page can trick a user into performing an action on an inner page (loaded using the iframe element) which has been made 99% transparent.

Alternatives

As web technology developed, many of the purposes for which frames were used became possible in ways that avoided the problems identified with frames.

See also

Related Research Articles

<span class="mw-page-title-main">Document Object Model</span> Convention for representing and interacting with objects in HTML, XHTML, and XML documents

The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an HTML or XML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.

Dynamic HTML, or DHTML, is a term which was used by some browser vendors to describe the combination of HTML, style sheets and client-side scripts that enabled the creation of interactive and animated documents. The application of DHTML was introduced by Microsoft with the release of Internet Explorer 4 in 1997.

<span class="mw-page-title-main">HTML</span> HyperText Markup Language

Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design ; authoring, including standardised code and proprietary software; user experience design ; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term "web design" is normally used to describe the design process relating to the front-end design of a website including writing markup. Web design partially overlaps web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability and be up to date with web accessibility guidelines.

<span class="mw-page-title-main">Hyperlink</span> Method of referencing visual computer data

In computing, a hyperlink, or simply a link, is a digital reference to data that the user can follow or be guided to by clicking or tapping. A hyperlink points to a whole document or to a specific element within a document. Hypertext is text with hyperlinks. The text that is linked from is known as anchor text. A software system that is used for viewing and creating hypertext is a hypertext system, and to create a hyperlink is to hyperlink. A user following hyperlinks is said to navigate or browse the hypertext.

<span class="mw-page-title-main">Bookmarklet</span> Web browser bookmark containing JavaScript code

A bookmarklet is a bookmark stored in a web browser that contains JavaScript commands that add new features to the browser. They are stored as the URL of a bookmark in a web browser or as a hyperlink on a web page. Bookmarklets are usually small snippets of JavaScript executed when user clicks on them. When clicked, bookmarklets can perform a wide variety of operations, such as running a search query from selected text or extracting data from a table.

An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The current de facto standard is governed by the industry group WHATWG and is known as the HTML Living Standard.

<span class="mw-page-title-main">Favicon</span> Icon associated with a particular web site

A favicon, also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons associated with a particular website or web page. A web designer can create such an icon and upload it to a website by several means, and graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page's favicon in the browser's address bar and next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab, and site-specific browsers use the favicon as a desktop icon.

URL redirection, also called URL forwarding, is a World Wide Web technique for making a web page available under more than one URL address. When a web browser attempts to open a URL that has been redirected, a page with a different URL is opened. Similarly, domain redirection or domain forwarding is when all pages in a URL domain are redirected to a different domain, as when wikipedia.com and wikipedia.net are automatically redirected to wikipedia.org.

A query string is a part of a uniform resource locator (URL) that assigns values to specified parameters. A query string commonly includes fields added to a base URL by a Web browser or other client application, for example as part of an HTML document, choosing the appearance of a page, or jumping to positions in multimedia content.

A framekiller is a technique used by websites and web applications to prevent their web pages from being displayed within a frame. A frame is a subdivision of a Web browser window and can act like a smaller window. A framekiller is usually used to prevent a website from being loaded from within a frameset without permission or as an attack, as with clickjacking.

Meta refresh is a method of instructing a web browser to automatically refresh the current web page or frame after a given time interval, using an HTML meta element with the http-equiv parameter set to "refresh" and a content parameter giving the time interval in seconds. It is also possible to instruct the browser to fetch a different URL when the page is refreshed, by including the alternative URL in the content parameter. By setting the refresh time interval to zero, meta refresh can be used as a method of URL redirection.

<span class="mw-page-title-main">Same-origin policy</span> Security measure for client-side scripting

In computing, the same-origin policy (SOP) is a concept in the web application security model. Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. An origin is defined as a combination of URI scheme, host name, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page's (DOM).

In a web browser, an access key or accesskey allows a computer user to immediately jump to a specific web page via the keyboard. They were introduced in 1999 and quickly achieved near-universal browser support.

A navigation bar is a section of a graphical user interface intended to aid visitors in accessing information. Navigation bars are implemented in operating systems, file browsers, web browsers, apps, web sites and other similar user interfaces.

The marquee tag is a non-standard HTML element which causes text to scroll up, down, left or right automatically. The tag was first introduced in early versions of Microsoft's Internet Explorer, and was compared to Netscape's blink element, as a proprietary non-standard extension to the HTML standard with usability problems. The W3C advises against its use in HTML documents.

<span class="mw-page-title-main">Clickjacking</span> Malicious technique of tricking a Web user

Clickjacking is a malicious technique of tricking a user into clicking on something different from what the user perceives, thus potentially revealing confidential information or allowing others to take control of their computer while clicking on seemingly innocuous objects, including web pages.

XFrames was an XML format draft for embedding HTML pages into one page which handles the layout without the problems of HTML Frames. This technique has been especially popular for navigation bars. While HTML Frames are still supported for legacy websites, today websites combine the page on the server instead.

HTML attributes are special words used inside the opening tag to control the element's behaviour. HTML attributes are a modifier of a HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them. In HTML syntax, an attribute is added to a HTML start tag.

Web Messaging, or cross-document messaging, is an API introduced in the WHATWG HTML5 draft specification, allowing documents to communicate with one another across different origins, or source domains while rendered in a web browser. Prior to HTML5, web browsers disallowed cross-site scripting, to protect against security attacks. This practice barred communication between non-hostile pages as well, making document interaction of any kind difficult. Cross-document messaging allows scripts to interact across these boundaries, while providing a rudimentary level of security.

References

  1. ↑ "Connecting to Other Websites". 2 April 2013. What makes framing different is that instead of taking the user to the linked website, the information from that website is imported into the original page and displayed in a special "frame". Technically, when you're viewing framed information, your computer is connected to the site doing the framing—not the site whose page appears in the frame.
  2. ↑ Garaffa, Dave (23 December 1996). "A Present From Apple: Cyberdog 2.0a1" (Press release). Internet.com. Archived from the original on 17 August 2000. Retrieved 14 April 2011.
  3. ↑ Ladd, Eric. "Using HTML 3.2, Java 1.1, and CGI; Ch. 13, Frames". Archived from the original on 30 October 2007.
  4. ↑ Shafer, Dan (1996). JavaScript & Netscape wizardry . Scottsdale, AZ: Coriolis Group Books. pp.  31. ISBN   978-1-883577-86-5.
  5. ↑ "XFrames working draft". W3C.
  6. ↑ HTML5 differences from HTML4: "The following elements are not in HTML5 because using them damages usability: frame, frameset, noframes"
  7. ↑ HTML5 differences from HTML4: "The iframe element has new attributes called sandbox and srcdoc which allow for sandboxing content, e.g. blog comments."
  8. ↑ "Framesets".
  9. ↑ Roberts, L, John. "CSS and SEO" . Retrieved 28 January 2022.
  10. 1 2 Nielsen, Jakob (December 1996). "Frames Suck Most of the Time".
  11. ↑ "Should You Use Frames?". HTML Code Tutorial. Archived from the original on 6 August 2016. Retrieved 7 April 2010.
  12. ↑ "G.E.Boyd's How To Do Just About Anything by email – Part 1". GeoCities. 11 August 2000. Archived from the original on 17 August 2000. Retrieved 24 June 2010.
  13. ↑ Moore-Eded, Piers. "SEO fundamentals 1". Lewes SEO. Retrieved 25 February 2012.
  14. ↑ "I Hate Frames Club".
  15. 1 2 "Why are frames so evil?".
  16. 1 2 "The Pros and Cons of Frames in Web Pages".
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.