使用layui实现从商品展示跳转到商品详情页，上一页html跳转到另外一页html，前端值在页面之间的传递

旧城等待， 2023-07-18 02:34 184阅读 0赞

# 一. 问题背景 #

*  点击商品展示页，能另外打开新标签跳转到商品详情页，效果如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70_pic_center]
 *  前台：使用到的页面全是html没有jsp，所以这里是在html之间传值，从商品展示页传递商品id到商品详情页

# 二. 解决方案 #

## 2.1 思路 ##

1.  给`<a>`绑定onclick事件
2.  定义一个处理跳转的函数

## 2.2 关键代码 ##

最最最最最关键的是`window.open('xxxxxxxxxxxxx.html');`

*  mallIndex.html商品详情页，product\_id是已经被赋值了的变量，将此值传给商品详情页，如下：

**解释：**

1.  如果上面用window.location.href而不是window.open，那么将不会打开新的标签页进行跳转，而是在当前标签页进行跳转。`window.open`的作用有`target='_blank'`的功能
2.  上面定义函数用window.to = function ()\{\} 而不是function to()\{\}，如果采用后者，那么点击`<a>`后则会出现`Uncaught ReferenceError: xxx is not defined`报错

*  productDetail.html商品详情页，最最最最关键是用`window.location.search()`，如下：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/795464e03a514a718ed53c6a11f11bba.png