Hiding an iframe from the page code. We program behind the scenes. Incompatibility with different browsers
Frames divide the browser window into separate areas that sit side by side. A separate web page is loaded into each of these areas. Since there is a lot of talk around frames about their need, here are the advantages and disadvantages of frames so that you can independently decide whether to use them on your site.
Advantages of frames
Simplicity
Frames delimit a web page into two areas that contain the site's navigation and content. The frame mechanism allows you to open a document in one frame, by clicking on a link clicked in a completely different frame. This division of a web page into components is intuitive and logical.
Rapidity
For a layout without frames, it is common to place both navigation and content on the same page. This increases the volume of each page and, in total, can significantly affect the amount of information downloaded from the site. And since frames use the division of information into parts, pages with them will load faster.
Accommodation
Frames provide a unique opportunity - placing information exactly in the right place in the browser window. So, you can put a frame at the bottom of the browser and regardless of the scrolling of the content, this area will not change its position.
Resizing areas
You can resize frames on the fly, which is not possible with traditional HTML layout.
loading
The web page is loaded only into the specified window, the rest remain unchanged. Using the JavaScript language, you can simultaneously load two or more pages into frames.
Disadvantages of frames
Navigation
The user often finds himself on the site, completely unaware of where he got to, because he just clicked on the link received in the search engine. To make it easier for a site visitor to figure out where he is, the site name, page title and navigation are placed on each page. Frames tend to violate this principle by separating the site title from the content and the navigation from the content. Imagine that you find a suitable link in a search engine, click on it, and as a result, a document opens without a title and navigation. To understand where we are or to look at other materials, we will have to edit the path in the address bar, which is inconvenient in any case.
Bad indexing by search engines
Search engines do not work well with framing because the pages that contain the content do not have links to other documents.
Internal pages cannot be added to Bookmarks
Frames hide the URL of the page the visitor is on and always show only the URL of the site. For this reason, the page you like is difficult to bookmark your browser.
Incompatibility with different browsers
Frame parameters have the property of displaying completely differently in different browsers. Moreover, the contradiction between them is so obvious that the same parameters are interpreted by browsers in their own way.
Disrespect
A very strange flaw that has nothing to do with the technical features of creating a site, but rather an ideological nature. Sites with frames are considered undignified, and their authors immediately fall out of the category of professionals who never use frames in their work. The exception is chats, where you can do without frames, although you can, but with rather cunning methods, and with the help of frames, creating chats is quite simple.
It should be noted that some of the above disadvantages are completely bypassed. So, with the help of scripts, you can make a separate document open in the browser formed with the entire frame structure. Search engines are also already better at indexing frame documents than they were a few years ago.
Frames are HTML elements that allow you to split a web browser window into several independent windows, into each of which you can load a separate HTML document. Each such window (frame) can have its own scroll bars and function independently of other independent windows or, on the contrary, control their content. They can be used to organize a menu that is permanently located in one window, while the information itself is located in another window. Users can access the menu at any time without having to go back to the previous page to select a different menu item. Using frames allows you to "dock" images or other intended interface elements to the browser window while the rest of the page scrolls in the frame.
However, it is worth noting that frames are considered an obsolete tool these days, and sites with frames are now considered unremarkable, as professional webmasters never use frames in their projects. There are a number of notorious problems associated with frames. They, for example, confuse search engines because the pages that contain the content do not have links to other documents. If you want to get visitors from search engines, forget about frames. It is impossible for the user to place a page he likes in the bookmarks section of the browser, since frames hide the address of the page on which he is located, and always show only the address of the website. For this reason, they pose a challenge for browsers to track history, and yet they are not well suited to different screen sizes and mobile devices.
Despite the fact that projects with frames are less and less common on the World Wide Web, learning HTML would be incomplete without looking at the topic of frames. Along with disadvantages, frames have some advantages that do not allow us to dismiss this technology as unpromising.
Creating frames
The structure of an HTML document with frames looks very similar to the format of a regular HTML document. As in a normal HTML document, all the code is placed between the paired tags
and
, and in the container
headings are located. The main difference between a document with frames and a regular HTML document is that a document with frames instead of a tag
paired tag applies (from the English frame set - a set of frames).
The following example shows the structure of an HTML document with frames:
Example: Structure of an HTML Document with Frames
- Try it yourself "
| frame_top | |
| frame_left | frame_right |
In the example shown, the page contains three regions, each of which initially loads the HTML documents frame_top.html, frame_left.html, and frame_right.html. In addition to HTML documents, a frame can also contain graphics. To do this, you must specify the address of the corresponding image in the attribute src, for example src = "image.gif"... Note that the element
used without an end tag.
Inside the container can only contain tags
or another set of frames covered by tags and
.
Tag has the following attributes:
- rows- describes pagination into lines:
- cols- describes pagination into columns:
In the meaning of the attributes rows and cols it is necessary to specify not the number of rows or columns, but the value of the width and height of the frames. All values in the list are separated by commas. Dimensions can be specified in absolute units (pixels) or as a percentage:
- cols = "20%, 80%"- the browser window is split into two columns using the attribute cols, the left column takes up 20% and the right 80% of the browser window.
- rows = "100, *" the browser window is split into two horizontal windows using the attribute rows, the top window occupies 100 pixels, and the bottom window occupies the remaining space, indicated by the asterisk symbol.
As you can see from this example, the container with attribute rows first creates two horizontal frames, and replaces the second frame with one more which splits the bottom horizontal frame into two columns using the attribute cols, the left column occupies 20%, and the right one occupies 80% of the browser window.
If the browser does not support frames, then the window will display the text located between the tags
Floating frames
Element
8.5. Sending data from hidden form fields
After clicking the button in the address bar, you will see that in addition to user = name, there is also h = your_browser_name... In the form you filled out, the h field was not visible. Thus, the form has sent additional information to the server in addition to your desire. This is already unpleasant, although the information itself in this case (the name of the browser) does not represent anything criminal. If as data transfer method not GET was used (as in our example, by default), but POST, then the user would not even notice this hidden data transfer.
Example 8.3. The example consists of two frames (located in the files left. htm and right. htm) containing the same form. In addition to this, the following script is placed in the right frame:
function copyFields () (here = document.forms.elements; there = window.top.frames.document.forms.elements; here.value = there.value; here.value = there.value; here.value = there.value ; here.value = there.value; setTimeout ("copyFields ()", 100);) window.onload = copyFields;
The copyFields () function runs every 0.1 sec. When the user enters data in the left frame, the same data goes into the corresponding fields of the right frame. Thus, data from one window can be read by the program from another window (or frame). The only question is whether you want this to happen. How these issues are addressed is discussed below in the Security Model section.
Another example is sending data on an event without having a visible form on the web page:
Click the linkWhen you click on a hypertext link, not only the message that is indicated in this link will be issued, but also the form data will be sent. You end up with two warning windows... But you did not order the second window!
Of course, uncontrolled data transfer to the server can be avoided by entering the send confirmation mode (in the browser settings). But, firstly, many users disable it, and secondly, you can use not forms, but, for example, graphics. And we will now consider this possibility in the next section.
Invisible code
The issue of accessibility of JavaScript code is considered from two points of view: identification, as a result, the need to hide the code, and user security, therefore, the accessibility of the code.
There are a few other non-security issues that can be solved using hidden code programming techniques.
We will consider the possibilities of using hidden code, without passing a verdict on the advantage of one or another approach. Let's consider several options:
- invisible frame;
- code in an external file;
- data exchange via integrated graphics.
Strictly speaking, the first two options do not completely hide the code. They are designed for either inexperienced users or those who are not curious. One way or another, not every time you will look at the source text of the page.
Invisible frame
The programming technology in an invisible frame is based on the fact that when describing a frame structure, you can set a configuration like:
8.6. The right frame is zero-width (border is visible)
In this case, the left frame will occupy the entire volume of the working area of the window, and the contents of the right one will be hidden. It is in this invisible frame that we will place the program code (for example, the above script for reading fields from a form in the left frame). Graphics swap functions are sometimes placed in an invisible frame, allowing the user to already work with the main frame while the rest of the graphics is loaded.
In this example, however, we left the user the opportunity to expose us: along the right border of the window, a vertical bar is visible - this is the border between frames. The user can slide it to the left and see the right frame. It is not difficult to protect against this - it is enough to set the thickness of the frame borders, and also indicate the impossibility of resizing each frame:
8.7. The right frame is zero-width (border is invisible)
Code in an external file
How to include JavaScript code located in an external file was described in the introductory lecture:
This method allows you to hide the code only from the lazy user. But the JavaScript code itself is readily available because the specified file can simply be downloaded separately, or you can save the entire HTML page (with all scripts connected to it) using the browser menu.
Communication via integrated graphics
This technique is based on two ideas: the ability to swap a graphic image without reloading the page and the ability to swap this graphic image not through specifying the URL of the graphic file, but through a CGI script that returns Content-type: image / ... or redirects. It should be borne in mind that you can use a method other than GET only in forms. In the following example, we created the change_image () function, which, formally speaking, changes the value of the src property of an image. But as a side effect, lets the server know if the user's cookie has been set (if the image.cgi CGI script is programmed appropriately on the server side):
This harmless sequence of JavaScript statements will let us know if the client has received the cookie. Cookies may not be supported for various reasons. In this case, the program sends the cookie set by it to the server as a script parameter under the guise of changing the picture.
Security model
When programming in JavaScript, it is potentially possible to access the user's personal information from the program. Such a problem always arises when something running on a computer has the ability to independently organize data exchange over the network with a remote server. From version to version, the management of the protection of such data is constantly being improved, but it should always be borne in mind that many "pathfinders" are investigating this problem and are constantly discovering more and more new opportunities for bypassing protection mechanisms. We will only explain the main points in the principles of information security in JavaScript, and leave the search for potential weaknesses as homework for the most inquisitive readers.
By default, JavaScript-protected data includes:
| Object or class | Properties |
|---|---|
| document | cookie, domain, lastModified, location, referrer, title, URL, links, forms |
| Form |
Description
The simplest and most widespread way is to use a hidden frame, into which the data will be loaded. Typically, such a frame is implemented using an IFRAME element.
< iframe name = "buffer" src = "about: blank" style = " width : 0px; height : 0px; overflow : hidden; border : none; " > iframe>You cannot use display: none to hide a frame - Opera will not allow access to such a frame. (An alternative working solution is position: absolute; visibility: hidden; width: 0px; height: 0px;.)
In this case, the request and receipt of data occurs in an asynchronous manner, most often using a callback function defined in the context of the main page: // f-i will be called when receiving data from the server function frameCallback ( data ) { // some actions with the received data }
When the script needs to get some data from the server, it issues a command to load the page into this iframe:
Window. frames [ "buffer" ] ... location = url; // url - GET request to the server
You can also use an invisible form submission with target = "buffer". This will allow data to be sent to the server using the POST method.
In response, the server must generate and return a page with JavaScript code that will call the callback function:
<html> <script> parent. frameCallback ( "received data" ) ; script> html>Advantages
- Obviousness of implementation: just IFRAME is the first thing that comes to mind.
- The ability to send data to an IFRAME of an arbitrary form (including dynamically created one), which solves problems with data encodings (all re-encoding is performed by the browser).
disadvantages
- Clogged history of the browser.
- Cross-browser issues: Each browser has its own and extremely unstable features when working with IFRAME.
- Large memory consumption (in fact, each IFRAME is a separate small browser).
- Difficulties in Opera: you can only access the content of the IFRAME, which was created with the src attribute specified, which matches the name of the current site.
XMLHttpRequest and ActiveX Microsoft.XMLHTTP
Advantages
- Components are used for their intended purpose.
- Greater memory savings compared to IFRAME.
disadvantages
- The solutions are specific to IE and Mozilla / Firefox (in IE it does not work at all with ActiveX disabled), in Opera there is support only starting from version 8.
SCRIPT: Loading data via dynamically generated SCRIPT tag
Advantages
- Good cross-browser compatibility. Identical code and method in different browsers (including Opera).
- Saves memory compared to IFRAME.
- History is not corrupted.
- The method does not rely on browser features and works in IE5.0 +, Mozilla 1.7+, Firefox 1.0+ and Opera 7.3+ (here “+” means “in this and newer versions”). In addition, it uses neither ActiveX nor IFRAME.
disadvantages
- Unable to send too much data to the server (QUERY_STRING length limitation).
- It is necessary to work with Unicode in the server script (PHP has the iconv extension for this).
- Browsers handle dynamically generated SCRIPT tags differently, so the cross-browser solution contains a number of hacks.
