js弹出窗口返回值的简单实例-前端开发

下面我为你详细讲解“js弹出窗口返回值的简单实例”的完整攻略。

下面我为你详细讲解“js弹出窗口返回值的简单实例”的完整攻略。

1. 简介

弹出窗口是指在当前页面之上打开另一个小窗口，通常用于提示/确认信息、输入数据等，其返回值也通常用于将弹出窗口中的数据传递到主页面。而在基于web技术的网站中，JavaScript是用来实现弹出窗口功能的主要技术。

2. 实现流程

2.1 弹出窗口

首先，在打开弹出窗口的链接/按钮中需要绑定一个JavaScript函数，以监听事件。而这个JavaScript函数也就是我们接下来需要编写的“弹出窗口的实现函数”。

对于弹出窗口的实现函数，我们通常需要使用如下代码实现：

function openWindow() {
  //打开弹出窗口页面：window.open(url)
  //url为需要打开的弹出窗口页面的地址，需要自行填写
  var windowObj = window.open(url);

  //防止弹出窗口被浏览器拦截
  if (windowObj == null) {
    alert("请关闭您的浏览器拦截弹出窗口功能");
    return;
  }

  //等待弹出窗口页面加载完成后再进行下一步操作
  windowObj.onload = function() {
    //在弹出窗口中执行代码
    //code为需要在弹出窗口中执行的代码，需要自行填写
    windowObj.eval(code);
  }
}

2.2 传递/获取返回值

在弹出窗口页面中，我们需要通过类似如下的代码来设置/获取返回值：

//设置返回值
function setValue() {
  //value为需要设置的返回值，需要自行填写
  window.opener.setValue(value);

  //关闭弹出窗口
  window.close();
}

//获取返回值
function getValue() {
  //value为需要获取的返回值，需要自行填写
  window.opener.getValue(value);

  //关闭弹出窗口
  window.close();
}

而在主页面中，我们也需要编写类似如下的代码来接受/处理返回值：

//设置返回值的函数
function setValue(value) {
  //处理返回值：将返回值赋值给表单元素
  //element为需要接受返回值的表单元素的id，需要自行填写
  document.getElementById(element).value = value;
}

//获取返回值的函数
function getValue() {
  //获取返回值：从表单元素中获取对应的值
  //element为需要获取返回值的表单元素的id，需要自行填写
  var value = document.getElementById(element).value;

  //处理返回值
  //code为需要在主页面中针对返回值进行的后续处理，需要自行填写
  eval(code);
}

3. 示例说明

3.1 示例一：弹出窗口填写表单项

首先，我们需要在主页面中添加一个“填写表单”的链接/按钮，并绑定一个名为“openInputWindow”的JavaScript函数，以监听点击事件：

<a href="javascript: openInputWindow()">填写表单</a>

而在“openInputWindow”函数中，我们需要编写如下代码实现弹出窗口的功能：

function openInputWindow() {
  //定义弹出窗口页面的地址
  var url = "input.html";

  //定义弹出窗口页面中需要执行的代码
  var code = "console.log('弹出窗口示例一：填写表单');";

  //打开弹出窗口
  //onload事件中设置表单元素的id为“inputValue”的返回值
  //getValue方法中根据返回值，将输入内容添加到一个列表中
  openWindow(url, code);
}

而在弹出窗口页面中，我们需要设置类似如下的代码实现表单的输入和提交：

<input type="text" id="inputValue">
<button onclick="setValue()">提交</button>

同时，在“setValue”函数中，我们需要设置返回值为表单元素“inputValue”的值：

function setValue() {
  //设置返回值
  var value = document.getElementById("inputValue").value;
  window.opener.setValue(value);

  //关闭弹出窗口
  window.close();
}

而在主页面中的“setValue”函数中，我们需要设置返回值的处理方法，将输入内容添加到一个列表中：

function setValue(value) {
  //处理返回值
  var listElement = document.createElement("li");
  listElement.innerText = value;
  document.getElementById("valueList").appendChild(listElement);
}

这样，在主页面上就可以实现一个简单的输入表单并将内容添加到列表的功能。

3.2 示例二：弹出窗口读取URL参数

在这个示例中，我们需要在主页面中添加一个“读取URL参数”的链接/按钮，并绑定一个名为“openParamWindow”的JavaScript函数，以监听点击事件：

<a href="javascript: openParamWindow()">读取URL参数</a>

而在“openParamWindow”函数中，我们需要编写如下代码实现弹出窗口的功能：

function openParamWindow() {
  //定义弹出窗口页面的地址
  var url = "param.html?param1=value1&param2=value2";

  //定义弹出窗口页面中需要执行的代码
  var code = "console.log('弹出窗口示例二：读取URL参数');";

  //打开弹出窗口
  //onload事件中获取并设置返回值为URL参数中的“param2”的值
  //getValue方法中将返回值添加到一个列表中
  openWindow(url, code);
}

而在弹出窗口页面中，我们需要读取URL参数并设置类似如下的代码返回URL参数中的“param2”的值：

function getParam() {
  //获取URL参数中的“param2”的值
  var params = window.location.search.substring(1).split("&");
  var param2Value = null;
  for (var i = 0; i < params.length; i++) {
    var param = params[i].split("=");
    if (param[0] == "param2") {
      param2Value = param[1];
      break;
    }
  }

  //设置返回值
  window.opener.setValue(param2Value);

  //关闭弹出窗口
  window.close();
}

而在主页面中的“setValue”函数中，我们需要设置返回值的处理方法，将“param2”的值添加到一个列表中：

function setValue(value) {
  //处理返回值
  var listElement = document.createElement("li");
  listElement.innerText = value;
  document.getElementById("valueList").appendChild(listElement);
}

这样，在主页面上就可以实现一个简单的读取URL参数并将“param2”的值添加到列表的功能。