<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
</head>
<frameset cols="20%,80%">
<frame src="https://www.jb51.net/link.html" />
<frame src="https://www.jb51.net/show.html" />
</frameset>
</html>
在show.html中展示的商品旁边可以加入这样一条语句：
<a href="https://www.jb51.net/void(0)">加入购物车</a>
其中link表示导航框架，在link.html页面中定义了arrOrders数组来存储商品的id，函数addToOrders()用来响应商品旁边【购买】链接的单击事件，它接收的参数id表示商品的id，例子中是一个id为32068的商品：
复制代码 代码如下:
<script language="JavaScript" type="text/javascript">
<!--
var arrOrders=new Array();
function addToOrders(id){
arrOrders.push(id);
}
//-->
</script>
这样，在结帐页面或是购物车浏览页面就可以用arrOrders来获取所有准备购买的商品。框架可以使一个页面划分为功能独立的多个模块，每个模块之间彼此独立，但又可以通过window对象的引用来建立联系，是Web开发中的一个重要机制。在Ajax开发中，还可以利用隐藏框架实现各种技巧，Ajax实现无刷新上传文件以及解决Ajax的前进后退问题都会用到这种技术。
2. 如何动态改变frame和iframe的尺寸大小？
改变frame尺寸：
复制代码 代码如下:
//index.html
<html>
<head>
<meta content="Microsoft FrontPage 5.0">
<meta content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>动态改变框架大小 </title>
</head>
<FRAMESET rows="50%,50%">
<FRAME SRC="https://www.jb51.net/main.htm">
<FRAME SRC="https://www.jb51.net/main.htm">
</FRAMESET>
</html>
//2.main.htm
复制代码 代码如下:
<HTML>
<TITLE>Form Object example</TITLE>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function fttop() {
if (document.getElementById("yltop").value=="隐藏上部"){
document.getElementById("yltop").value="隐藏下部";
parent.full.rows="0,*";
}else{
document.getElementById("yltop").value="隐藏上部";
parent.full.rows="*,0";
}
}
function ftall()
{
parent.full.rows="50%,50%";
}
</SCRIPT>
</HEAD>
<BODY>
<FORM METHOD="get">
<input type="button" value="隐藏上部">
<input type="button" value="显示全部">
</FORM>
</BODY>
</HTML>
运行index.html
改变iframe尺寸：
复制代码 代码如下:
<iframe src="https://www.jb51.net/article/1.htm">
</iframe>
<br>
<input type="button" value="加宽">
<input type="button" value="加高">
<script language="javascript">
function addWidth()
{
var o=document.getElementById("frame1");
o.width=eval(o.width)+10;
}
function addHeight()
{
var o=document.getElementById("frame1");
o.height=eval(o.height)+10;
}
</script>