具体需求:
1. 框架集中包含上下两个框架,上面为购物车,下面为商品列表,点击商品列表中购买,实现购物车中额数字增加并传递商品ID
实现思路:
具体代码:
shopping.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <frameset rows="10%, *" frameborder="0" framespacing="0"> <frame src="shoppingcart.html" name="shoppingcart" noresize="noresize"/> <frame src="productinfo.html" name="productinfo" noresize="noresize"/> </frameset> </html>
shoppingcart.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
#header nav {
float: right;
}
#header nav ul li {
list-style: none;
}
</style>
</head>
<body>
<div id="header">
<nav>
<ul>
<li><a href="javascript:void(0)" onclick="alert(self.cartArr)">购物车(<span id="cartNum">0</span>)</a></li>
</ul>
</nav>
</div>
<script type="text/javascript">
var cartArr = new Array()
var cartNum = document.getElementById(‘cartNum‘)
function buy(id){
cartArr.push(id)
cartNum.innerText = parseInt(cartNum.innerText) + 1
}
</script>
</body>
</html>
productinfo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.product {
background-color: #F7F7F7;
background-clip: content-box;
height: 70px;
line-height: 70px;
padding: 0 0 10px 2px;
}
.product .p-left {
width: 100px;
float: left;
}
.product .p-middle {
float: left;
}
.product .p-right {
float: right;
width: 100px;
text-align: right;
}
</style>
</head>
<body>
<div class="product">
<div class="p-left">1</div>
<div class="p-middle">苹果</div>
<div class="p-right">
<a href="javascript:void(0)" onclick="self.parent.frames.shoppingcart.buy(1)">购买</a>
</div>
</div>
<div class="product">
<div class="p-left">2</div>
<div class="p-middle">梨子</div>
<div class="p-right">
<a href="javascript:void(0)" onclick="self.parent.frames.shoppingcart.buy(2)">购买</a>
</div>
</div>
</body>
</html>
有图有相:
总结说明:
1. 页面中每个框架都拥有自己的window对象,保存在frames集合中,所有框架页面定义的变量或函数都会自动成为对应框架window对象的成员
2.可通过特殊全局对象获取指定框架对象,self对象始终指向当前框架对象,top对象始终指向最外层的框架,parent对象始终指向上层框架对象,页面无框架时,parent/top/self都等于window对象,各个框架之前可以通过对象定位来实现数据通信
时间： 2024-10-05 22:23:12