用div+iframe 代替frameset 框架

最新推荐文章于 2023-04-27 10:14:48 发布

Luxika

最新推荐文章于 2023-04-27 10:14:48 发布

阅读量292

点赞数

分类专栏： javascript 文章标签：框架 XHTML HTML C C++

本文链接：https://blog.youkuaiyun.com/Luxika/article/details/83807069

版权

javascript 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用DIV和IFRAME代替过时的FRAMESET的方法，通过JavaScript控制实现页面导航栏的收缩与展开功能。这种方式解决了FRAMESET带来的如SESSION丢失等问题，并保持了良好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

frameset 已经过时, 使用frameset会带来很多问题,比如session丢失等. 所以提倡用iframe,iframe的好处我就不用多说了.下面用div+iframe来代替frameset的收缩与展开功能.
view plaincopy to clipboardprint?

1. <%@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs" Inherits="ProductServices10._Default" %>
2.
3.
4.
5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
6.
7. <html xmlns="http://www.w3.org/1999/xhtml">
8.
9. <head id="Head1" runat="server">
10.
11. <title>产品服务系统</title>
12.
13. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
14.
15. <style type="text/css">
16.
17. html,body{
18.
19. margin:0px;
20.
21. height:100%;
22.
23. }
24.
25. </style>
26.
27. <script language="javascript" type="text/javascript">
28.
29. function DisplayNav()
30.
31. {
32.
33. var nav = document.getElementById('divLeft');
34.
35. var main = document.getElementById('divmain');
36.
37. if(nav.style.display=='block'|| nav.style.display=='')
38.
39. {
40.
41. nav.style.display='none';
42.
43.
44.
45. main.style.display = 'block';
46.
47. }
48.
49. else
50.
51. {
52.
53. nav.style.display='block';
54.
55. main.style.marginleft='395px';
56.
57. }
58.
59. }
60.
61. </script>
62.
63. </head>
64.
65. <body style="margin: 0; padding: 0; background-color: #0266C6;">
66.
67. <form id="from1" runat="server">
68.
69. <div id="divTop" style="width: 100%; height: 60px; border: none 0px">
70.
71. <img src="Images/Top/toplogo.jpg" οnclick="DisplayNav();" />
72.
73. </div>
74.
75. <div style="width:100%;height: 100%; border: none 0px">
76.
77. <div id="divLeft" style="width: 195px; height:100%; overflow: hidden; float: left;">
78.
79. <iframe src="left.aspx" style="height: 100%" frameborder="0" border="0" marginwidth="0" marginheight="0" ></iframe>
80.
81. </div>
82.
83. <div id="divmain" style="height: 100%; border: none 0px">
84.
85. <iframe src="main.aspx" width="100%" height="100%" frameborder="0" border="0" marginwidth="0" marginheight="0" ></iframe>
86.
87. </div>
88.
89. </div>
90.
91. </form>
92.
93. </body>
94.
95. <html>