首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何从html弹出窗口返回值

要从HTML弹出窗口返回值,可以使用JavaScript的window.open()方法创建一个新的浏览器窗口,并在新窗口中打开指定的URL。在新窗口中,可以执行一些操作,然后通过JavaScript的window.opener.postMessage()方法将结果发送回原始窗口。

以下是一个简单的示例:

  1. 在HTML中创建一个按钮,用于打开弹出窗口:
代码语言:html<button onclick="openPopup()">打开弹出窗口</button>
复制
  1. 在JavaScript中编写openPopup()函数,用于打开弹出窗口并监听返回值:
代码语言:javascript
复制
function openPopup() {
  // 打开弹出窗口
  var popup = window.open("popup.html", "popup", "width=500,height=500");

  // 监听返回值
  window.addEventListener("message", function(event) {
    if (event.origin !== "http://localhost:8080") {
      return;
    }
    console.log("收到返回值:" + event.data);
  });
}
  1. 在弹出窗口中执行一些操作,并通过window.opener.postMessage()方法将结果发送回原始窗口:
代码语言:javascript
复制
function returnValue() {
  var value = "Hello from popup!";
  window.opener.postMessage(value, "http://localhost:8080");
  window.close();
}

在这个示例中,我们首先在HTML中创建了一个按钮,用于打开弹出窗口。然后,在JavaScript中编写了openPopup()函数,用于打开弹出窗口并监听返回值。在弹出窗口中,我们执行了一些操作,并通过window.opener.postMessage()方法将结果发送回原始窗口。最后,在原始窗口中,我们监听了返回值并将其打印到控制台中。

需要注意的是,由于浏览器的安全策略,我们需要在打开弹出窗口时指定允许跨域通信的源(即event.origin !== "http://localhost:8080"),否则无法接收到返回值。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

1分28秒

PS小白教程:如何在Photoshop中制作出镂空文字?

1分10秒

PS小白教程:如何在Photoshop中制作透明玻璃效果?

22秒

PS使用教程:如何在Mac版Photoshop中新建A4纸?

1分26秒

PS小白教程:如何在Photoshop中完美合并两张图片?

2分4秒

PS小白教程:如何在Photoshop中制作出水瓶上的水珠效果?

3分54秒

PS使用教程:如何在Mac版Photoshop中制作烟花效果?

领券