用div+iframe 代替frameset 框架

最新推荐文章于 2023-04-27 10:14:48 发布
最新推荐文章于 2023-04-27 10:14:48 发布
阅读量808 收藏
点赞数
分类专栏： Web前端 文章标签： c#

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

[html] view plain copy print ?
  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" onclick="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>  
<%@ Page Language="C#" AutoEventWireup="true" Codebehind="Default.aspx.cs" Inherits="ProductServices10._Default" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

    <title>产品服务系统</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style type="text/css">

        html,body{

     margin:0px;

     height:100%;

    }

    </style>

    <script language="javascript" type="text/javascript">

        function DisplayNav()

        {

            var nav = document.getElementById('divLeft');

            var main = document.getElementById('divmain');

            if(nav.style.display=='block'|| nav.style.display=='')

            {

                nav.style.display='none';

                

                main.style.display = 'block';

            }

            else

            {

                nav.style.display='block';

                main.style.marginleft='395px';

            }

        }

    </script>

</head>

<body style="margin: 0; padding: 0; background-color: #0266C6;">

    <form id="from1" runat="server">

        <div id="divTop" style="width: 100%; height: 60px; border: none 0px">

            <img src="Images/Top/toplogo.jpg" οnclick="DisplayNav();" />

        </div>

        <div style="width:100%;height: 100%; border: none 0px">

            <div id="divLeft" style="width: 195px; height:100%; overflow: hidden; float: left;">

                <iframe src="left.aspx" style="height: 100%" frameborder="0" border="0" marginwidth="0" marginheight="0" ></iframe>

            </div>

            <div id="divmain" style="height: 100%; border: none 0px">

                     <iframe src="main.aspx" width="100%" height="100%" frameborder="0" border="0" marginwidth="0" marginheight="0" ></iframe>

            </div>

        </div>

    </form>

</body>

<html>
jnhh95
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Div+Css布局--iframe的使用
Economic_shark的博客
09-22 972
iframe在table的使用<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>iframe的使用</title> <style type="text/css"> table{width: 900px;height: 700px;
iframe框架
得意小门生的博客
09-19 122
效果图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .left{
以div代替frameset，用css实现仿框架布局
03-18
NULL 博文链接：https://jsufly.iteye.com/blog/648867
IFRAME替代FRAMESET 框架布局
ava_chc的专栏
09-10 435
最近项目要求替换frameset过时技术，本人运用IFRAME+div替换。在布局时比较麻烦，本来应该竖直显示的两个IFRAME显示出来之后，iframe2内容总是显示在屏幕的页面的最下方。最后终于搞定。虽然不是什么高招，但是还算是解决问题啦！ 特此记录一下： 子框架给父框架属性赋值： $("#iframe1",parent.document.body).css("height"...
html div代替frameset,frameset过时，以及用div+iframe的代替frameset实现
weixin_35062801的博客
06-17 352
今天在学习 java web项目时，书中示例使用了 标签，编译器添加删除线标识该标签过时，最初考虑不影响使用，就没有关心，运行工程后发现网页没有输出，于是查询相关资料，学习记录。过时的frameset使用frameset页面空白问题这是因为我将 标签放到了 标签中实现，而 和 不能一起使用。在 HTML 5 中不支持 标签。使用可能会带来session丢失等问题rows="100,*" bo...
使用div替代＜frameset＞＜frame＞的问题以及解决办法
最新发布
qq3892997的博客
04-27 965
1. 替换后最重要的就是a标签指定刷新哪个frame需要更改为$('#main').load(链接)，其他倒没有什么，如果不把frame改成div就会经常出现frame中某些内容重复生成或者不显示，特别恶心。window.parent是当前页面C通过location.href转到新的页面D，那在D页面上window.parent就是B。window.opener是当前页面A通过open方法弹出一个窗口B，那在B页面上 window.opener就是A。
网页DIV+CSS布局与ifame传统布局对比
cnmeimei的博客
08-07 176
通常我们从设计师手上拿到设计稿，按照功能划分为很多小块，然后再利用div+css写成静态页面按照设计稿排列还原，最后把具体内容填充到小块里面。网页布局就是你想要的页面功能在你拿到设计图切块完成重新排列还原好！ div是一个容器，具体根据内容自动适配，可以设置它的宽高，内容尽可能的排列到div当中，当然在设置div宽高后，它里面的图片文字是可能超出设置的宽高度的。 table布局，可以查看HTML基础标签图片文本超链接列表表格介绍这里面有讲到，需要注意的是在table表格中，colspan是可以跨列...
html div代替frameset,用div+iframe替代frameset
weixin_29661797的博客
06-17 385
用div+iframe替代frameset(2011-05-21 19:14:39)使用div+iframe标签配合JavaScript是可以替代frameset的示例代码：//===========样式表============#header{ height:55px; background-color:blue;}#left{ width:200px; float:left;}#right{ ...
frameset过时，以及用div+iframe的代替frameset实现
qq_42058441的博客
01-20 4444
今天在学习 java web项目时，书中示例使用了 &lt;frameset&gt;&lt;/frameset&gt;标签，编译器添加删除线标识该标签过时，最初考虑不影响使用，就没有关心，运行工程后发现网页没有输出，于是查询相关资料，学习记录。 过时的frameset 使用frameset页面空白问题 这是因为我将 &lt;frameset&gt;&lt;/frameset&gt; 标...
html div+Iframe
03-16
NULL 博文链接：https://hje.iteye.com/blog/440512
div+css代替iframe框架并带全屏遮罩加载特效
01-24
div+css代替iframe框架并带全屏遮罩加载特效，div+css框架、div代替iframe、框架全屏遮罩、全屏加载特效
div+css实现frameset网页布局
03-02
div+css实现frameset布局效果。
后台首选布局技术,Frameset绝对经典 精简 清晰布局
03-23
概述 定义和用法 frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。[1] 类别 HTML之中的元素之一。 作用 其作用是指定一个框架集，用于组织多个框架和嵌套框架集。 FRAMESET 元素是 FRAME 元素的容器。HTML 文档可包含 FRAMESET 元素或 BODY 元素之一，而不能同时包含两者。 如果用户在框架中打开了 Web 文件夹后单击了 Web 文件夹中的内容，那么被单击的文件或文件夹将取代整个窗口。例如，假设页面包含两个框架，一个框架指向 http://www.microsoft.com 第二个框架指向网络驱动器。如果用户单击第二个框架中的文件或文件夹，该框架将活动整个窗口的控制，包括第一个框架。对于浏览器不能处理的文件类型，如 *.txt 文件，将会打开对应的应用程序窗口。 尽管 Web 文件夹是文件系统层次的一部分，但是该技术并不总是表示文件系统中的实际内容。一个典型的例子就是网络邻居。 使用范围 此元素在 Microsoft® Internet Explorer 3.0 的 HTML 中可用，在 Internet Explorer 4.0 的脚本中可用。 注意：不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。不过，如果需要为不支持框架的浏览器添加一个 <noframes> 标签，请务必将此标签放置在 <body></body> 标签中！ 编辑本段示例 下面的例子使用了 FRAMESET 元素来定义页面中的三列矩形。 <FRAMESET COLS="25%, 50%, *"> <FRAME SRC="contents.htm"> <FRAME SRC="info.htm"> <FRAME SCROLLING="NO" SRC="graphic.htm"> </FRAMESET> COLS="25%，* " 垂直切割画面(如分左右两个画面)，接受整数值、百分数， * 则代表占用馀下空 间。数值的个数代表分成的视窗数目且以逗号分隔。例如 COLS="30，* ，50%" 可以切成三个视窗，第一个视窗是 30 pixels 的宽度，为一绝对分割，第二个视窗是当分配完第一及第三个视窗后剩下的空间，第三个视窗则占整个画面的 50% 宽度为一相对分割。您可自己调整数字。 ROWS="120，* " 就是横向切割，将画面上下分开，数值设定同上。唯 COLS 与 ROWS 两参数尽量不要同在一个 <FRAMESET> 标记中，因 Netacape 偶然不能显示这类形的框架，尽量采用多重分割。 <FRAME> 参数设定： 例子：<frame name="top" src="info.html" marginwidth="5" marginheight="5" scrolling="Auto" frameborder="0" noresize framespacing="6" bordercolor="#0000FF"> name="top" 设定这个框窗的名称，这样才能指定框架来作连结，必须但任意命名。 src="info.html" 设定此框窗中要显示的网页档案名称，每个框窗一定要对应着一个网页档案。你可使用绝对路径或相对路径，有关此两者详见於【连结进阶】。 marginwidth=5 表示框架宽度部份边缘所保留的空间。 marginheight=5 表示框架高度部份边缘所保留的空间。 scrolling="Auto" 设定是否要显示卷轴，YES 表示要显示卷轴，NO 表示无论如何都不要显示， AUTO是视情况显示。 frameborder=0 设定框架的边框，其值只有 0 和 1 ， 0 表示不要边框， 1 表示要显示边框。（避 免使用 yes 或 no ） framespacing="6" 表示框架与框架间的保留空白的距离。 bordercolor="#008000" 设定框架的边框颜色。颜色值请参考【HTML 剖析】。 另外： border="0" 设定框架的边框厚度，以 pixels 为单位。
HTML5不支持frameset的两种解决方法
09-27
frameset标签定义框架集，它用于组织多个窗口（框架）。每个框架存在一个独立的文档。在最简单的应用中，frameset 元素仅仅声明框架集中存在的列或行的数目。但在 HTML5中frameset标签没有得到支持，本文将跟大家分享HTML5不支持frameset的两种解决方法。
web前端--用div替代frameset和frame
落叶翩翩的CSDN博客
12-12 5672
html取代frame框架,html5 frameset标签的替代方案是什么？frameset标签替代的解决办法...
weixin_39671405的博客
06-07 1646
本篇文章主要的介绍了关于html5 frameset标签的替代方案实例解析，还有关于html5 frameset标签的两个解决办法，现在让我们一起来看这篇文章吧首先我们先看看html5 frameset标签的替代方案是什么：页面尽量少用 frameset 不利于被搜索引擎搜索到。下面是在Visual Studio中对FrameSet与Frame的警告提示:警告 验证 (XHTML 1.0 Tr...
Web标准与Div+CSS布局：优化网页制作
- **框架的(Frameset)**：专门用于包含框架的页面。 在实际应用中，过渡的DTD是最常见的选择，因为它允许使用一些传统元素，方便了开发者的工作。例如，以下是一个过渡的DTD声明： ```html <!DOCTYPE ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值