Frameset tag design page considerations

Important: You cannot place the tag inside in the label. And HTML5 no longer supports the use of frameset tags! ! !

#1. The frameset element can define a frameset, which is used to organize multiple windows (frames). Each framework has separate documentation. With the use of the frame, we can split the page and refresh it partially. Reasonable use will bring a very good experience to users.

2. Several attributes of frameset:

①, cols:Define the number and size of columns in the frameset . Cut the screen vertically (for example, into two left and right screens), accept integer values ​​and percentages, * means occupying the remaining space. The number of values ​​represents the number of divided windows and is separated by commas. For example, COLS="30,*,50%" can be divided into three windows. The first window has a width of 30 pixels and is an absolute division. The second window is what remains after the first and third windows are allocated. The space below, the third window occupies 50% of the entire window screen, and the width is a relative split. You can adjust the numbers yourself.

②、rows:Define the number and size of rows in the frame set. This is a horizontal cut, which separates the top and bottom of the screen. The value settings are the same as above. Try not to put the COLS and ROWS parameters in the same tag, because Netacape sometimes cannot display this type of frame, so try to use multiple splits.

③、frameborder:Set the border of the frame, its value is only 0 and 1, 0 means no border, 1 means to display the border.

④、border:Set the border thickness of the frame.

⑤、bordercolor:Set the border color of the frame.

⑥, framespacing: represents the distance between frames and the remaining blank space.

3. Attributes of the frame tag:

①, name: Set the frame name. This property must be set.

②, src: Set the name or path of the web page to be displayed in this frame. This property must be set.

③, scrolling: Set whether to display scroll bars. The setting values ​​are auto, yes, no.

④, bordercolor: Set the border color of the frame.

⑤、frameborder:Set whether to display the frame border. The setting values ​​are only 0 and 1; 0 means no border, 1 means to display the border.

⑥, noresize: Set whether the frame size can be adjusted manually.

⑦、marginwidth:Set the width between the frame boundary and the content inside it.

⑧, marginhight: Set the height between the frame boundary and the content within it.

⑨, width: Set the frame width.

⑩, height: Set the frame height.

4. Frameset usage example:

If you want to achieve the following effect

## The page is divided into three parts, top, left and right. Click the

hyperlink on the left, and the frame page on the right will change accordingly.

Overall page: main.html

1 <frameset rows="11%,*" border="1px" framespacing="0">2         <frame src="top.html" name="top" frameborder="0" />3         <frameset cols="12%,*"   framespacing="0" framespacing="0">4             <frame src="left.html" name="left" scrolling="auto"/>5             <frame src="right.html" name="right" scrolling="auto"/>6         </frameset>7 </frameset>

top.html, right.html is an empty page, left.html is as follows:

1 <!-- 左边菜单栏显示-->2     <p >3         <ul >4             <li ><a href="taskCreate.html" target="right" id="taskCreat">任务创建</a></li>5             <li ><a href="taskManage.html" target="right">任务管理</a></li>6             <li ><a href="#" target="right" >数据集管理</a></li>7             <li ><a href="#" target="right" >模型管理</a></li>8         </ul>9     </p>

The hierarchical display of the page is mainly the use of cols and rows in the frameset tag, combined with the nesting of the frame tag. If you want to click the menu bar on the left and the frame on the right changes accordingly, you must know the attribute

target: stipulates where to open the linked document. The browser will load and display the document in the frame or window named with this tag's href attribute and whose name matches this target. That is, in main.html,

,What is the value of the name attribute here, then in left.html, here Be equal.

5. How to get the elements in other frames in the frameset where the parent page is located in the child page?

That is, how to get the attribute value of the tag in left.html in right.html, etc.

$(parent.parent.mainFrame.

document).contents().find("body").html(); //manFrame refers to the id of the frame you want to view

For example, in the left.html page above ,The ID of task creation is taskCreat, then we can get it like this: and change its class attribute.

$(parent.parent.left.document).contents().find("#taskCreat").attr("class","list-group-item");

6. Advantages and disadvantages of frameset

We know that the current HTML5 standard no longer supports frameset. Although using it reloading does not require reloading the entire page, only one frame page in the page needs to be reloaded (reducing data transmission, speeding up web page download speed). But it also has many shortcomings, such as the browser's back button is useless; it will generate many pages, which is difficult to manage; the code is complex and difficult to be searched by search engines; small mobile devices are not fully displayed; multi-frame pages Will increase server http requests and so on. Therefore, we need to be careful about the use of frameset, and the current p+CSS can also be used to implement this function.

The above is the detailed content of Frameset tag design page considerations. For more information, please follow other related articles on the PHP Chinese website!