在网页开发中，有时我们需要在一个页面上通过模态框（Modal）打开一个新的页面，并且将数据传递给新页面。Layer是一款流行的JavaScript弹层组件，它提供了丰富的弹出窗口功能，包括模态框。本文将详细介绍如何使用Layer模态框给新页面传值。
我们需要了解Layer的基本使用方法。Layer模态框的创建通常通过`layer.open`函数来实现，这个函数接受一个配置对象作为参数，包含了模态框的各种属性，如标题、大小、内容等。在上述描述中，`type: 2`表示我们创建的是一个iframe类型的模态框，用于加载外部页面。
例如：
```javascript
layer.open({
title: '添加分类',
type: 2,
area: ['700px', '530px'],
fix: false, // 不固定位置
maxmin: true, // 允许最大化最小化
content: '{:url("yuyue/huayan")}?type=3', // 这里是加载的URL，可以传参
success: function(layero, index) {
// 模态框加载成功的回调
},
end: function() {
// 模态框关闭后的回调
}
});
```
在这个例子中，`content`字段是我们需要重点关注的，它定义了模态框中显示的内容。当`type: 2`时，`content`应该是一个URL，Layer会在这个URL中加载一个新页面。如果需要传递参数，可以在URL后面使用`?`加上键值对，如`?param1=value1¶m2=value2`。
为了从模态框向新页面传递值，我们只需要在URL后面添加查询字符串即可。例如，如果要传递一个名为`id`的参数，其值为`123`，可以这样写：
```javascript
content: '{:url("yuyue/huayan")}?id=123'
```
新页面可以通过`window.location.search`获取这些查询参数。在新页面中，我们可以这样读取`id`参数：
```javascript
var urlParams = new URLSearchParams(window.location.search);
var id = urlParams.get('id');
console.log('接收到的id:', id); // 输出：123
```
在上述示例的`end`回调函数中，`handle_status`的值根据业务逻辑被用来判断操作结果并给出相应的提示。如果`handle_status`为`1`，表示添加成功，使用`layer.msg`显示提示，并在2秒后关闭当前页面；如果`handle_status`为`2`，表示添加失败，同样显示提示，但不会关闭页面。
通过Layer模态框给新页面传值的核心在于正确构造`content`字段，以及在新页面中使用`URLSearchParams`对象解析查询参数。这种方法简单易用，适用于大多数场景，能帮助开发者在不刷新整个页面的情况下实现页面间的通信。
