网页中的框架(详解)

网页中的框架(详解)

所谓框架便是网页画面分成几个框窗,同时取得多个 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%的人还看了以下文章

  • css布局基础:定位练习1

    主要知识点: 1、5种常用定位:静态定位/相对定位/绝对定位/固定定位/吸附定位(磁铁定位) position:static/relative/absolute/fixed/sticky。 2、除静态定位外,都可以用left/top/bottom/right/z-index属性进行移动。 效果图: 效果说明:故宫文字段落设置背景色黑色透明,覆盖在图片底部。 …

    2020年4月4日
    2.3K0
  • 第15课:最后提示

    祝贺!你已经进入最后一课了! 我已经学到全部知识了? 如果你已经学完以上教程,恭喜你,你已经学到了很多关于HTML的知识,并且完全有能力创建自己的网站!不过,你所学到的只是基础知识,还有许多内容需要掌握。但是你已经为进一步学习打下了坚实的基础。 在最后这一课中,我们将给予一些最后提示: 首先,在HTML文档中,应保持正确的顺序与结构。令你的HTML文档具有良…

    2018年1月18日
    2.0K0
  • 跟永哥学HTML5(5):正确使用HTML5的nav和figure

    这节课就给大家讲解常见的HTML5标签错误使用写法,帮助大家理解并学会正确使用HTML5的nav和figure。 1、不要把所有列表式的链接放在nav里 随着HTML5引入了 30个新元素,我们在构造语义化和结构化的标签时的选择也变得有些不慎重。也就是说,我们不应该滥用超语义化的元素。不幸的是,nav就是这样一个被滥用的例子。 nav元素的规范描述如下: n…

    2018年2月3日
    2.2K0
  • 跟永哥学HTML5(2):html5与html4的区别

    我们现在web前端开发的网页,一般都是html4.0。很多以前学过HTML 4.0的朋友可能此时会感到很迷惑,html 4.0和HTML5有什么区别? hmtl5与html4的区别? 先来看看HTML5推出的理由: 解决Web浏览器间的兼容性问题 在一个浏览器中可以运行的HTML、Css、Javascript,在另一个浏览器中不能运行。原因:各浏览器规范不统…

    2018年1月21日
    2.2K0
  • 第5课:到目前为止学到了些什么?

    上一课我们已经学习了这些: <html> <head><title></title></head> <body> </body> </html> 网页标题(title)写在head(头部)里:<title>网页标题写在这里</title>。…

    2018年1月20日
    2.2K0
  • 手把手,永哥教你学会css sprite(雪碧图)技术

    css sprite又称雪碧图或css精灵。 雪碧图就是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。 雪碧图被运用在众多使用了很多小图标的网站上。相对于把每张小图标以.png格式文件的形式引用到页面上,使用雪碧图只需要引用一张图片,对内存和带宽更加友好。 css sprite优点: 有效减少网站的http请求数量,加…

    2018年2月20日
    5.2K0

发表回复

登录后才能评论