所谓框架便是网页画面分成几个框窗，同时取得多个 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：目标框架,引用的是目标框架的名字。
- 在当前框架中打开超链接页面
默认就是在当前框架页中打开,也可以采用Target=“_self” - 在指定框架中打开超级链接页面
Target=“name” - 新开窗口打开链接页面
Target=“_blank” - 跳出整个框架集
Target=“_parent”
Scrolling：是否显示滚动条。yes, no, auto
Noresize：框架在浏览器里不可以被调整大小。
iframe
定义和用法
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
<iframe src="http://www.125jz.com/"></iframe>
iframe常用属性:
- frameborder:是否显示边框，1(yes),0(no)
- height:框架作为一个普通元素的高度，建议在使用css设置。
- width:框架作为一个普通元素的宽度，建议使用css设置。
- name:框架的名称，window.frames[name]时专用的属性。
- scrolling:框架的是否滚动。yes,no,auto。
- 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
微信扫一扫 
支付宝扫一扫