每日一题_JavaScript.利用Js操作frameset框架集对象实现购物车?

具体需求:

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)" οnclick="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)" οnclick="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)" οnclick="self.parent.frames.shoppingcart.buy(2)">购买</a></div></div></body>
</html>

有图有相:

总结说明:

1. 页面中每个框架都拥有自己的window对象,保存在frames集合中,所有框架页面定义的变量或函数都会自动成为对应框架window对象的成员

2.可通过特殊全局对象获取指定框架对象,self对象始终指向当前框架对象,top对象始终指向最外层的框架,parent对象始终指向上层框架对象,页面无框架时,parent/top/self都等于window对象,各个框架之前可以通过对象定位来实现数据通信

转载于:https://blog.51cto.com/xmdevops/1853697

每日一题_JavaScript.利用Js操作frameset框架集对象实现购物车?相关推荐

js 操作frameset frame 对象
js 操作frameset frame 对象框架编程概述一个HTML页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一个独立的HTML页面.这里所讲的框架编程包 ...
利用js的闭包原理做对象封装及调用方法
创建一个js文件,名为testClosure.js: ? 1 2 3 4 5 6 7 8 9 (function () { function a() { alert('i am a') ...
HTML5 - frameset框架集
frameset框架集 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:/ ...
html frameset边框,frameset框架集(示例代码)
frame使用注意事项: 1.frame不能脱离frameset单独使用 2.frame不能放在body标签中,不然不起效果. 3.frame的高度只能由frameset来决定. frameset:是 ...
ie下利用js操作文件及目录
注:以下操作只在IE下有效! Javascript是网页制作中离不开的脚本语言,依靠它,一个网页的内容才生动活泼.富有朝气.但也许你还没有发现并应用它的一些更高级的功能吧?比如,对文件和文件夹进行读. ...
爱创课堂每日一题101天-哪些操作会造成内存泄漏？
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在. 垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量.如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环 ...
JS操作frame框架
1 框架编程概述一个Html 页面可以有一个或多个子框架,这些子框架以<iframe>来标记,用来显示一个独立的Html 页面.这里所讲的框架编程包括框架的自我控制以及框架之间的互相访 ...
利用JS面向对象+模块化封装集AJAX请求、基本数据校验、URL参数截取等功能于一身的通用工具模块
以下为封装好的工具类代码,使用方法将在后边介绍. /*** Created by xiaoqiang on 2017/11/09.*/ 'use strict'; import $ from 'jqu ...
Python：每日一题之小猪存钱罐（并查集）
题目描述 Byteazar the Dragon 拥有 N 个小猪存钱罐.每一个存钱罐能够用相应的钥匙打开或者被砸开.Byteazar 已经将钥匙放入到一些存钱罐中.现在已知每个钥匙所在的存钱罐,By ...

每日一题_JavaScript.利用Js操作frameset框架集对象实现购物车?

每日一题_JavaScript.利用Js操作frameset框架集对象实现购物车?相关推荐

最新文章

热门文章