返回

如何可靠地从新弹出窗口获取值？

javascript

从新弹出窗口获取值：一种健壮的方法

问题：
在 Web 开发中，从新弹出窗口中提取值是一项常见的任务。然而，当页面在弹出窗口中重新加载时，获取值的代码经常失效。

解决方案：
要解决此问题，需要使用 load 事件侦听器监听弹出窗口的加载事件。然后，我们可以使用 jQuery 的 on 方法将点击事件侦听器附加到弹出窗口中的列表项。

步骤：

  1. 在父窗口中，使用 load 事件侦听器监听弹出窗口的加载事件。
  2. 一旦弹出窗口加载，使用 jQuery 的 on 方法将点击事件侦听器附加到弹出窗口中的列表项。
  3. 当用户单击列表项时，可以获取它的值并采取适当的操作。

示例代码：
Index.html

<button id="open-new-windows">TEST</button>

<script>
  $("#open-new-windows").click(function () {
    var w = window.open(
      "http://localhost/test/child.html",
      "TEST",
      "width=300,height=400"
    );

    w.addEventListener("load", function () {
      var html = $(w.document.body).find("ul");
      html.on("click", "li", function () {
        var a = $(this).text();
        alert(a);
      });
    });
  });
</script>

Child.html

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

优势：
使用这种方法，即使页面在弹出窗口中重新加载，我们仍可以可靠地从弹出窗口获取值。它通过将点击事件侦听器附加到弹出窗口的文档中来实现这一点，从而确保无论页面如何重新加载，事件侦听器仍会存在。

常见问题解答：
1. 为什么使用 load 事件侦听器很重要？
答：load 事件侦听器确保在页面加载并准备好与之交互后才附加点击事件侦听器。

2. 是否可以将此方法应用于其他框架，例如 AngularJS 或 Vue.js？
答：是的，可以将类似的概念应用于其他框架，但具体的实现可能有所不同。

3. 如果需要从弹出窗口中获取多个值怎么办？
答：可以使用数组或对象存储从弹出窗口获取的多个值。

4. 如何处理弹出窗口中可能的安全问题？
答：请确保弹出窗口脚本与父窗口脚本在同一域中运行，以避免潜在的安全问题。

5. 此方法是否适用于所有浏览器？
答：此方法应该适用于所有现代浏览器，但始终建议测试跨浏览器兼容性。

结论：
通过使用 load 事件侦听器和 jQuery 的 on 方法，我们可以可靠地从新弹出窗口中获取值，即使页面在弹出窗口中重新加载后仍然可以获取值。这种方法在 Web 开发中非常有用，因为它允许我们轻松地从外部窗口中获取信息和进行交互。