一、frameset
1. 属性
①border
设置框架的边框粗细。
②bordercolor
设置框架的边框颜色。
③frameborder
设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。
④cols
纵向分割页面。其数值表示方法有三种：“30%、30（或者30px）、*”；数值的个数代表分成的视窗数目且数值之间用“,”隔开。“30%”表示该框架区域占全部浏览器页面区域的30%；“30”表示该区域横向宽度为30像素；“*”表示该区域占用余下页面空间。例如：cols="25%,200,*" 表示将页面分为三部分，左面部分占页面30%，中间横向宽度为200像素，页面余下的作为右面部分。
⑤rows
横向分割页面。数值表示方法与意义与cols相同。
⑥framespacing
设置框架与框架间的保留的空白距离。
2. 用例
<frameset cols="213,*" frameborder="no" border="0" framespacing="0">
注意1：
cols与rows两属性尽量不要同在一个<frameset>标签中使用。若要实现下图架构，代码正确写法为：
Frameset使用教程
<frameset rows="59,*" cols="*" frameborder="no" border="0" framespacing="0">
<frame src="???" name="topFrame" scrolling="No" noresize="noresize" id="topFrame"/>
<frameset cols="213,*" frameborder="no" border="0" framespacing="0">
<frame src="???" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame"/>
<frame src="???" name="mainFrame" id="mainFrame"/>
【即，若想即使用cols又使用rows，可利用frameset嵌套实现】
注意2：
<frameset cols="40%,*,*">
意思是：第一个框架占整个浏览器窗口的40%,剩下的空间平均分配给另外两个框架。
<frameset cols="*,*,*,*">
意思是：浏览器窗口等分为四部分。

二、frame
1. 属性
①name
设置框架名称。此为必须设置的属性。
②src
设置此框架要显示的网页名称或路径。此为必须设置的属性。
③scrolling
设置是否要显示滚动条。设定值为auto, yes, no。
④bordercolor
设置框架的边框颜色。
⑤frameborder
设置是否显示框架边框。设定值只有0、1；0 表示不要边框，1 表示要显示边框。
⑥noresize
设置框架大小是否能手动调节。
⑦marginwidth
设置框架边界和其中内容之间的宽度。
⑧marginhight
设置框架边界和其中内容之间的高度。
⑨width
设置框架宽度。
⑩height
设置框架高度。
2. 用例
<frame src="???" name="topFrame" scrolling="No" noresize="noresize" marginwidth="10" marginhight="10" width="400" height="800" />

3.

Iframe父页面与子页面之间的相互调用
Iframe父页面与子页面之间的相互调用
父页面：

复制代码
<!DOCTYPE html>
<html>
<head>
    <title>parents</title>
    <meta charset="UTF-8">
</head>
<body>
<div id="default">div内容</div>
<iframe src="child.html" id="child"></iframe>
 <script language="javascript" type="text/javascript">
　　function sayhello() {
　　　　alert('Hello World!');
　　}
　　var value = 'value';
　　child.contentWindow.test();
</script>

</body>
</html>
复制代码
子页面：

复制代码
<!DOCTYPE html>
<html>
<head>
    <title>child</title>
    <meta charset="UTF-8">
    <script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(function() {
            //在iframe子页面中查找父页面元素
            alert($('#default', window.parent.document).html());
            //在iframe中调用父页面中定义的变量
            alert(parent.value);
            //在iframe中调用父页面中定义的方法
            parent.sayhello();
        });
　　　　　
　　　function test() {
        alert('我是子页面!');
    }
</script> </head> <body> <div>iframe子页面内容</div> </body> </html>

四、iframe
是浮动的框架（frame），其常用属性与frame类似，其他的主要有以下（相同的就不列举了）
1. 属性
①align
设置垂直或水平对齐方式
②allowTransparency
设置或获取对象是否可为透明。
2. 用例
<iframe name="123" align="middle" marginwidth="0" marginheight=0 src="???" frameborder="0" scrolling="no" width="776" height="2500"></iframe>

注意：
iframe标签与frameset、frame标签的验证方法不同，是XHTML 1.0 Transitional。且iframe是放在body标签之内，而frameset、frame是放在body标签之外。

五、综合示例
<html>
<head>
<title>综合示例</title>
</head>
<frameset cols="25%,*">
<frame src="menu.htm" scrolling="no" name="Left">
<frame src="page1.htm" scrolling="auto" name="Main">
<noframes>
<body>
<p>对不起，您的浏览器不支持“框架”！</p>
</body>
</noframes>
</frameset>
</html>
【说明】
<noframes></noframes>标志对也是放在<frameset></frameset>标志对之间，用来在那些不支持框架的浏览器中显示文本或图像信息。在此标志对之间先紧跟<body></body>标志对，然后才可以使用我们熟悉的任何标志。

最后需要说明一点：
如果将代码按照我以上所写写到VS中报错的话，例如：
Frameset使用教程
或者
Frameset使用教程
解决方法如下：
工具→选项→文本编辑器→HTML→验证→Internet Explorer 6.0

好了，通过以上内容，大家再多加练习，就会慢慢熟悉frame的相关知识了，用好了的话你会发现真的挺好。至于frame系列标签的事件方法，一般用的不是非常多，需要的话，大家自己再查吧。【

】

以上网络不推荐，如果新手，那么frame框架就是个坑，需要解决很多问题，建议实际在用可尝试以下其中之一使用

这段代码可去除滚动条，并全屏显示，推荐：

<iframe name="manage" src="first.html" scrolling="no" frameborder="0" width="100%"  onload="this.height=0;var fdh=(this.Document?this.Document.body.scrollHeight:this.contentDocument.body.offsetHeight);this.height=(fdh>700?fdh:700)" ></iframe>

为避免弹框问题可是尝试本人使用的：

但有一个问题，主页面的类名不能和分页面的类名写一样

方式一：

 <ul id="left-Logo">
                <li><a target="depart-Manage.aspx" onselectstart="return false;">管理1</a></li>
                <li><a target="account-Manage.aspx" onselectstart="return false;">管理2</a></li>
                <li><a target="task-Manage.aspx" onselectstart="return false;">管理3</a></li>
                <li><a target="bug-Overview.aspx" onselectstart="return false;">概况</a></li>
                <li><a target="bug-me.aspx" onselectstart="return false;">分配1</a></li>
                <li><a target="commit-record.aspx" onselectstart="return false;">分配2</a></li>
                <li><a target="bug-all.aspx" onselectstart="return false;">所有</a></li>
                <li><a target="bug-count.aspx" onselectstart="return false;">统计</a></li>
                <li class="left-four"><a target="bug-Manage.aspx" onselectstart="return false;">管理</a></li>

            </ul>

<div id="right">

</div>

　　

 $.get("first.aspx", function (data) {
            $("#right").html(data);
        });
        $("#left-Logo li").click(function () {
            var current = $(this);
            $("#left-Logo li").css("background", "#1f64a5");
            $("#left-Logo li a").css("color", "#168edf");
            $(this).css("background", "#3a8fd2");
            $(this).children().css("color", "#e6f2fd");
            target = current.find('a').attr('target');
            $.get(target, function (data) {
                $("#right").html(data);
            })
        });

方式二：

<div class="manage">
            <!--导航-->
            <div class="manage-header">
                <ul>
                    <li target="manage" title="person-Manage" class="two">
                        <a>管理</a>
                        <ul class="selectlist">
                            <li title="depart-Manage,点击文字">
                                <a target="manage" href="depart-Manage.html">管理1</a>
                            </li>
                            <li title="account-Manage,点击文字">
                                <a target="manage" href="account-Manage.html">管理2</a>
                            </li>
                        </ul>
                    </li>
                    <li title="task-Manage,点击文字">
                        <a target="manage" href="task-Manage.html">管理3</a>
                    </li>
                    <li title="bug-Submit,点击文字">
                        <a target="manage" href="bug-Manage.html">管理4</a>
                    </li>

                </ul>
                <div class="exit">
                    <span>退出</span>
                </div>

            </div>

            <!--内容-->
            <iframe name="manage" src="first.html" scrolling="no" frameborder="0" width="100%"  onload="this.height=0;var fdh=(this.Document?this.Document.body.scrollHeight:this.contentDocument.body.offsetHeight);this.height=(fdh>700?fdh:700)" ></iframe>
        </div>

方式三：使用load()

$(document).ready(function(){
 $("#h1").load("first.html");
 $("#h2").load("second.html");
 $("#h3").load("third.html");
 $("#h4").load("fourth.html");
})

取代iframe框架的更多相关文章

  1. ASP.NET 页面禁止被 iframe 框架引用

    两个站点: a.sample.com b.sample.com a.sample.com 站点中的一段示例 JS 代码: var iframe = document.createElement(&qu ...

  2. 当session过期后自动跳转到登陆页而且会跳出iframe框架

    写项目时在重定向后一直存在一个问题就是重定向后登陆页面会出现在跳出的子框架里.

  3. session失效后，登录页面嵌入iframe框架

    在登录页面的onload方法中加入以下代码解决: //防止登录页面嵌入iframe框架 if (top.location != self.location){ top.location=self.lo ...

  4. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...

  5. js实现网页防止被iframe框架嵌套及几种location.href的区别

    首先我们了解一下几种location.href的区别简单的说:几种location.href的区别js实现网页被iframe框架功能,感兴趣的朋友可以了解下 首先我们了解一下:window.locat ...

  6. javascript_获取iframe框架中元素节点的属性值

    1. DOM:文档对象模型 [window 对象] 它是一个顶层对象,而不是另一个对象的属性即浏览器的窗口. [document 对象] 该对象是window和frames对象的一个属性,是显示于窗口 ...

  7. iframe框架自适应高度 uncanght SecurityError: Blocked a frame with origin "null" from accessing a frame ....

    来源于crm项目的contact/edit.html 一.背景是这样的 最近在做crm系统的前端页面,有一个页面呢,点击“查看全部信息”时会弹出,这个弹窗里面又有分页导航,分页不是使用ajax 异步刷 ...

  8. 在Iframe框架下如何跳转到登录界面

    在Iframe框架下跳转到登录界面总会跳到子界面中,类似于下图 试用Respon.Redirect()不行, 用Js函数,但我跳转代码都是写在cs文件中的,用Respose.write(),js函数根 ...

  9. iframe框架的应用

    同学接私活,我写几个页面. 后台系统,点击侧栏菜单后,右边div的要显示对应的内容.就是说,没选一下左边的菜单,右边的内容都要变化. 这次首先尝试了一下Oldfasional办法--iframe框架. ...

随机推荐

  1. 实习日记a

    根据NPSaleAPI项目,学习了weUI 练习: <a href="javascript:;" class="weui_btn weui_btn_primary& ...

  2. Codeforces 839A Arya and Bran

    Bran and his older sister Arya are from the same house. Bran like candies so much, so Arya is going ...

  3. 牛客网数据库SQL实战(21-25)

    21.查找所有员工自入职以来的薪水涨幅情况,给出员工编号emp_no以及其对应的薪水涨幅growth,并按照growth进行升序CREATE TABLE `employees` (`emp_no` i ...

  4. 【Python023/024--递归】

    一.递归--汉诺塔 1.有三个轴(x,y,z),64个盘子,把所有盘子从X轴移动到Z轴,要求移动到Z轴的盘子从上到下排序 思路: 问题一:将X上的63个盘子借助Z移动到Y上,拆解为: a.将前62个盘 ...

  5. 复旦大学2016--2017学年第二学期高等代数II期末考试情况分析

    一.期末考试成绩班级前十五名 林晨(93).朱民哲(92).何陶然(91).徐钰伦(91).吴嘉诚(91).于鸿宝(91).宁盛臻(90).杨锦文(89).占文韬(88).章俊鑫(87).颜匡萱(87 ...

  6. 02MySQL中的数据类型

    一.数值 INT DECIMAL 准确的小数值 FLOAT DOUBLE 二.字符串类型 CHAR(m) 此数据类型用于表示固定长度的字符串,可以包含最多达255个字符,其中m代表字符串的长度.长度固 ...

  7. P4172 [WC2006]水管局长

    P4172 [WC2006]水管局长 前言 luogu数据太小 去bzoj,他的数据大一些 思路 正着删不好维护 那就倒着加,没了 LCT维护他的最小生成树MST 树上加一条边肯定会有一个环 看看环上 ...

  8. 记录一下 ajax的基础传送

    传数据 var json = $("#form").serializeObject(); $.ajax({ url: "/getUser", type: &qu ...

  9. 使用JAX-WS开发WebService

    Axis2和CXF是目前流行的Webservice框架,这两个框架都属于重量级框架.相对而言,JAX-WS RI是一个轻量级的框架.开发WebService只需要很简单的几个步骤:写接口和实现-> ...

  10. （转）Applications of Reinforcement Learning in Real World

    Applications of Reinforcement Learning in Real World 2018-08-05 18:58:04 This blog is copied from: h ...