home > A computer > hidden frame. Getting data from the server without reloading the page

hidden frame. Getting data from the server without reloading the page

Frames divide the browser window into separate areas located next to each other. Each of these areas is loaded with a separate web page. Since there is a lot of talk around frames about their necessity, here are the advantages and disadvantages of frames so that you can decide for yourself whether it is worth using them on your site.

Advantages of frames

Simplicity

With the help of frames, a web page is divided into two areas that contain site navigation and content. The frame mechanism allows you to open a document in one frame by clicking on a link in a completely different frame. Such a division of a web page into components is intuitively understandable and logically conditioned.

Rapidity

Frameless layout is characterized by placing both navigation and content on the same page. This increases the size 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 - the placement of information exactly in right place browser windows. 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 traditional HTML layout does not allow.

Loading

The web page is loaded only in the specified window, the rest remain unchanged. Using the JavaScript language, you can simultaneously load two or more pages into frames.

Frame Disadvantages

Navigation

The user often ends up on the site without any idea where he got, because he just clicked on the link received in the search engine. To make it easier for the site visitor to figure out where he is, the site name, page title, and navigation are placed on each page. Frames tend to break 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 see other materials, we will have to edit the path in the address bar, which in any case is an inconvenience.

Poor indexing by search engines

Search engines do not work well with frames because the pages that contain the content do not link to other documents.

Internal pages cannot be bookmarked

Frames hide the URL of the page the visitor is on and always only show the URL of the site. For this reason, the page you like is difficult to bookmark the browser.

Incompatibility with different browsers

Frame parameters have the property of being displayed in completely different ways in different browsers. Moreover, the contradiction between them is so obvious that the same parameters are interpreted by browsers in a completely different way.

non-prestige

A very strange shortcoming, which has nothing to do with the technical features of the creation of the site, but is rather ideological in 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 it is possible to do without frames, but by quite cunning methods, and using frames to create chats is quite simple.

It should be noted that some of the above shortcomings are quite manageable. So, with the help of scripts, you can make a separate document opened in the browser be formed with the entire frame structure. Search engines are also already better at indexing frame documents than they were a few years ago.

Description

The simplest and most widely used 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 you to access 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 occur in an asynchronous way, most often with the help of a callback function defined in the context of the main page:

// function 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 gives the command to load the page into this iframe:

Window. frames [ "buffer" ] . location = url; // url - GET request to the server

You can also use invisible form submission with target="buffer" . This will allow you to send data to the server using the POST method.

In response, the server should generate and return a page with JavaScript code that will call the callback function:

<html > <script> parent. frameCallback ( "received data" ) ; script> html >

Advantages

Evidence of implementation: just an IFRAME is the first thing that comes to mind.
The ability to send arbitrary form data (including dynamically created one) to IFRAME, which solves problems with data encodings (all recoding is performed by the browser).

Flaws

Browser history clogging.
Cross-browser issues: Each browser has its own and highly unstable iframe behavior.
High memory consumption (in fact, each IFRAME is a separate small browser).
Difficulties in Opera: you can only access the content of the IFRAME, when created, the src attribute was specified, which matches the name of the current site.

XMLHttpRequest and ActiveX Microsoft.XMLHTTP

Advantages

Components are used for their intended purpose.
Great memory savings compared to IFRAME.

Flaws

The solutions are specific to IE and Mozilla/Firefox (in IE it doesn't work at all with disabled ActiveX), Opera only has support starting from version 8.

SCRIPT: Loading data via a dynamically generated SCRIPT tag

Advantages

Good cross-browser compatibility. Identical code and method in different browsers(including - works in Opera).
Memory savings compared to IFRAME.
- history is not corrupted.
- The method is browser-independent 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 does not use either ActiveX or IFRAME.

Flaws

It is not possible to send a lot of data to the server (limit on the length of QUERY_STRING).
It is necessary to work with Unicode in the server script (there is an iconv extension in PHP for this).
Browsers work differently with dynamically generated SCRIPT tags, so cross browser solution contains a number of hacks.

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. So the form is submitted to the server Additional information apart from your desire. This is already unpleasant, although the information itself in this case (browser name) is nothing criminal. If as data transfer method was used not GET (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) in which the same form is placed. In the right frame, in addition to this, the following script is also placed:

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 seconds. When the user enters data in the left frame, the same data goes into the corresponding fields in 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 it to happen. How these issues are addressed is described below in the "Security Model" section.

Another example is sending data on an event without having a visible form on the web page:

Click on the link

When you click on a hypertext link, not only will the message that is indicated in this link be displayed, but also the form data will be sent. You will end up with two warning windows. But you didn't order the second window!

Of course, uncontrolled transmission of data to the server can be avoided by entering the send confirmation mode (in the browser settings). But, firstly, many users turn it off, 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, hence the accessibility of the code.

Hidden code programming techniques allow you to solve several more problems that are not related to security.

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 external file ;
data exchange via integrated graphics.

Strictly speaking, the first two options do not completely hide the code. They are designed either for inexperienced users, or for inquisitive ones. Somehow, not every time you look source text pages.

invisible frame

The technology of programming in an invisible frame is based on the fact that when describing a frame structure, you can specify a type configuration:

8.6. Right frame has zero width (border visible)

In this case, the left frame will occupy the entire window client area, while the contents of the right frame 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 the form in the left frame). The invisible frame is sometimes placed graphics paging functions, allowing the user to already work with the main frame while the rest of the graphics are loaded.

AT this example, however, we left the user the opportunity to expose us: a vertical strip is visible along the right border of the window - this is the border between frames. The user can move it to the left and see the right frame. It is not difficult to protect yourself from this - just set the thickness of the borders of the frames, as well as indicating the impossibility of resizing for each frame:

8.7. The right frame has zero width (the border is invisible)

Code in an external file

How to include JavaScript code placed in an external file was described in the introductory lecture:

This method allows you to hide the code only from a lazy user. But the JavaScript code itself is easily accessible, because the specified file can simply be downloaded separately, or the entire HTML page (with all scripts connected to it) can be saved using the browser menu.

Data exchange via integrated graphics

This technique is based on two ideas: the ability to swap an image without reloading the page, and the ability to upload this image without specifying a URL. graphic file, but through a CGI script that returns Content-type: image/... or redirects. However, keep in mind that you can use a method other than GET only in forms. In the following example, we have created the change_image() function, which formally changes the value of the image's src property. But as a side effect, it lets the server know if the user has cookies set (if you code the image.cgi CGI script appropriately on the server side):

This harmless sequence JavaScript operators will let us know if the client received the cookie. Cookies may not be supported for various reasons. In this case, the program sends the cookies 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 for a program to access personal information user. This problem always arises when something running on a computer has the ability to independently organize data exchange over a network with 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 "trackers" are investigating this problem and are constantly discovering more and more new ways to bypass the protection mechanisms. We will explain only the main points in the principles of information security in JavaScript, and we will leave the search for potential weaknesses as homework for the most inquisitive readers.

Default to protected in JavaScript Data relate:

Table 8.1. Properties and methods that are protected