网页中的框架(详解)

网页中的框架(详解)

所谓框架便是网页画面分成几个框窗,同时取得多个 URL。

一、制作框架页面的步骤:

1.编写所有子框架页面
2.编写主框架页面
3.在主框架页面中设定子框架名称
4.如果框架页面之间存在链接,在子框架中设定链接。

注意:框架页面是不含标签的

二、基本语法

<frameset>
    <frame src="url">
    <noframes>
     <body>
         您的浏览器不支持框架,请考虑升级您的浏览器!
     </body>
    </noframes>
</frameset>

定义框架的基本语法

框架由一对<frameset>定义
<frameset>有两个属性:rows和cols
Rows定义上下分割的框架的大小;
cols定义左右分割的框架的大小;
在定义大小时,rows和cols可以使用相对大小或以百分比为单位。

各窗口的尺寸设置

<frameset rows=#>横排多个窗口

<frameset rows=30%,20%,*>
        <frame src="A.html">
        <frame src="B.html">
        <frame src="C.html">
</frameset>

排列方式:

A
B
C

<frameset cols=#>纵向排列多个窗口

<frameset cols=30%,20%,*>
    <frame src="A.html">
    <frame src="B.html">
    <frame src="C.html">
</frameset>

排列方式:A B C

COLS & ROWS:纵横排列多个窗口

<frameset cols=137,*>
     <frame src="A.htm">
     <frameset rows=82,*>
         <frame src="B.htm">
         <frame src="C.htm">
     </frameset>
</frameset>

排列方式:    

        B
A
        C

框架边框的颜色

bordercolor="ff0000“

各窗口边框的设置

frameborder=#
#=yes, no / 1, 0

框架边框的宽度

framespacing=”10″

三、<frame>的属性

name:定义该框架的名字。这个名字可以被一些网页元素引用,如被<a>元素引用。

<a href=url target=“framename”>

Src:在本框架里显示网页的URL。
Target:目标框架,引用的是目标框架的名字。

  1. 在当前框架中打开超链接页面
    默认就是在当前框架页中打开,也可以采用Target=“_self”
  2. 在指定框架中打开超级链接页面
    Target=“name”
  3. 新开窗口打开链接页面
    Target=“_blank”
  4. 跳出整个框架集
    Target=“_parent”

Scrolling:是否显示滚动条。yes, no, auto
Noresize:框架在浏览器里不可以被调整大小。

iframe

定义和用法

iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。

<iframe src="http://www.125jz.com/"></iframe>

iframe常用属性:

  1. frameborder:是否显示边框,1(yes),0(no)
  2. height:框架作为一个普通元素的高度,建议在使用css设置。
  3. width:框架作为一个普通元素的宽度,建议使用css设置。
  4. name:框架的名称,window.frames[name]时专用的属性。
  5. scrolling:框架的是否滚动。yes,no,auto。
  6. src:内框架的地址,可以使页面地址,也可以是图片的地址。
<iframe id="mainIframe" name="mainIframe" src="/main.html" frameborder="0" scrolling="auto" ></iframe>
<iframe id="mainIframe" name="mainIframe" src="http://www.125jz.com/" frameborder="0" scrolling="auto" ></iframe>

当主页面和iframe同域时,我们可以获取iframe里的内容:主要的两个API就是contentWindow,和contentDocument

iframe.contentWindow, 获取iframe的window对象
iframe.contentDocument, 获取iframe的document对象

这两个API只是DOM节点提供的方式(即getELement系列对象)

var iframe = document.getElementById("iframe1");
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
       console.log("window",iwindow);//获取iframe的window对象
       console.log("document",idoc);  //获取iframe的document
       console.log("html",idoc.documentElement);//获取iframe的html
       console.log("head",idoc.head);  //获取head
       console.log("body",idoc.body);  //获取body

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/5719.html

(2)
江山如画的头像江山如画管理团队
上一篇 2020年4月11日 下午12:29
下一篇 2020年4月11日 下午3:51

99%的人还看了以下文章

  • 第10课:表格

    表格用来显示那些逻辑上以行和列显示的信息。 表格难学吗? 对于初学者来说,在HTML中创建表格似乎比较复杂,不过只要耐心细致地观察,你就会发现表格实际上与其它HTML元素相似,也具有严格的逻辑结构。 例1: <table> <tr><td>单元格1</td><td>单元格2</td>&l…

    2018年1月19日
    3.8K0
  • 跟永哥学HTML5(4):正确使用HTML5的header、hgroup和section

    在上一章HTML5新增语义化元素的使用中我们讲解了HTML新增的标签,并举例给出如何使用。但真正从HTML4转变到HTML5编程,并不是那么简单的事情,很多初学者没有真正了解这些标签,或错误使用HTML5的标签。这节课就给大家讲解常见的HTML5标签错误使用写法,帮助大家学会正确使用HTML5的header、hgroup和section。 1、只在需要的时候…

    2018年2月3日
    4.9K0
  • 如何为需要打印的网页设置单独的css样式

    项目开发:同一个页面,需要在浏览器中浏览是一种样式,而当要打印这个页面时候,又需要呈现另一种样式。 此时可以用link标签中的media属性解决此问题。 如下面这两个引用: <link href=”stylesheets/print.css” media=”print” rel=”stylesheet” type=”text/css” /> &l…

    2019年11月20日
    5.0K0
  • iframe中子页和父页面如何传值

    本文介绍了,父页面father.html和子页面son.html之间如何传值,子页面如何调用父页面中的函数等操作

    2021年11月30日
    4.7K0
  • 纯CSS实现表格的自适应布局

    本文分享了一种用纯CSS实现的表格自适应布局,主要用到伪元素:before。

    2018年2月19日
    7.8K0
  • 第15课:用z-index进行层次堆叠

    CSS可以处理高度、宽度、深度三个维度。在前面的课程中,我们已经了解了前两个维度。在本课中,我们将学习如何令不同元素具有层次。简言之,就是关于元素堆叠的次序问题。 为此,你可以为每个元素指定一个数字(z-index)。其原理是:数字较大的元素将叠加在数字较小的元素之上。 比方说,我们正在打扑克,并且拿了一手同花大顺。我们可以通过为各张牌设定一个z-index…

    2020年2月25日
    3.5K0

发表回复

登录后才能评论