具体需求:

1. 框架集中包含上下两个框架,上面为购物车,下面为商品列表,点击商品列表中购买,实现购物车中额数字增加并传递商品ID

实现思路:

具体代码:

shopping.html

shoppingcart.html

            
     
              
              
      
                   * {                margin: 0;                padding: 0;            }            a {                text-decoration: none;            }            #header nav {                float: right;            }            #header nav ul li {                list-style: none;            }                        
       
                    
                        
        
                     var cartArr = new Array()            var cartNum = document.getElementById('cartNum')            function buy(id){                cartArr.push(id)                cartNum.innerText = parseInt(cartNum.innerText) + 1            }            
        
       
      
     

productinfo.html

            
     
              
              
      
                   * {                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;            }                                    
       
                    
        
         1            
         
          苹果            
          
                           
           
            购买                            
            
                         
             
              2            
              
               梨子            
               
                                
                
                 购买                        
                
               
              
             
            
           
          
         
        
       
      
     

有图有相:

总结说明:

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

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