jquery changes frame

With the development of front-end development, jQuery has become an essential technology for the majority of front-end developers. Among them, the technology of changing the frame through jQuery is becoming more and more widely used. This article will introduce how to use jQuery to change the frame.

1. What is a frame

In Web development, frame refers to a frame, also called a form. It is an HTML technology that splits a page into multiple views, allowing developers to display multiple independent HTML documents on the same page at the same time. Frames can be divided into two types, one is a horizontal frameset and the other is a vertical frameset. As shown in the figure below:

2. How jQuery changes the frame

There are two ways to change the frame through jQuery:

1 .Operate the child frame through the JS of the parent page

Get the object of the child frame through JS on the parent page, and then use the ID or name of the child frame to operate to modify all the contents of the child frame. Among them, the method of obtaining subframes is as follows:

var frameObj = $(frames["frameName"]);

Among them, frames is a global object, which contains the collection of all frames in the document. The required frame can be obtained by adding the name or id of the frame in square brackets.

Then operate the content of the frame through the frameObj object. The following sample code:

var frameObj = $(frames["frameName"]);
// 更改frame的src为http://www.example.com
frameObj.attr("src", "http://www.example.com");
// 获取frame的内容
console.log(frameObj.contents().find('.className').html());

2. Operate the parent page through the JS of the child frame

Use JS in the child frame to obtain the object of the parent page, and then operate it through the ID or name of the parent page . Among them, the method of obtaining the parent page is as follows:

var parentObj = $(window.parent.document);

Among them, obtain the object of the parent window through window.parent, and then obtain the Document object of the window through document.

Then operate the content of the parent page through the parentObj object. The following sample code:

var parentObj = $(window.parent.document);
// 更改父页面的title
parentObj.find('title').html('新的标题');
// 获取父页面的内容
console.log(parentObj.find('.className').html());

3. Usage scenarios of jQuery changing frame

1. When there are multiple frames in the page, dynamically modify the content in the frame to achieve the effect of updating the page without refreshing. .
2. The parent page controls the content of the child page through interaction with the child frame, such as changing the color, size, etc. of an element in the child page in the parent page.
3. The child page submits the form or obtains the data of the parent page through interaction with the parent page, realizing data transfer and sharing.

4. Things to note

1. Since cross-domain requests are involved, by default, frames cannot access and modify each other. However, cross-domain communication can be achieved by setting the sandbox attribute of the frame and the allow-same-origin attribute of the parent page.
2. frames need to use the same domain name, port number, and protocol to access and modify each other.
3. To access the frame in jQuery, you must first wait for the DOM to be loaded and use it in window.onload.

5. Summary

This article introduces how to change the frame through jQuery, and details its scenarios and precautions. A thorough understanding of this knowledge allows us to better perform front-end development and implement more functions.

The above is the detailed content of jquery changes frame. For more information, please follow other related articles on the PHP Chinese website!