如何从弹出窗口将数据传递到父窗口
How to pass data to parent window from popup window?
如何从弹出窗口传递一些数据或调用父窗口上的函数?
用户将单击一个链接,该链接将在同一网站上打开一个弹出窗口,一旦他完成弹出窗口,我希望它将新数据发送回父窗口,或调用父窗口上的函数。
window.opener对象就是您要查找的对象,在弹出窗口中使用它来调用父窗口的a函数:
window.opener.yourFunc()
这里有一个有趣而简单的演示,它深受类似问题答案的启发(但出于我自己的目的进行了修改,以帮助调查我职业生涯中最困难的错误)。
创建2个文件(在同一目录中)如下:
parent.html
<button type="button" onclick="popup('popup.html', '', 800, 200);">Add My Card</button>
=>
<span id="retrievedData">No data yet.</span>
<script>
function popup(url, title, width, height) {
var left = (screen.width / 2) - (width / 2);
var top = (screen.height / 2) - (height / 2);
var options = '';
options += ',width=' + width;
options += ',height=' + height;
options += ',top=' + top;
options += ',left=' + left;
return window.open(url, title, options);
}
function setData(data) {
console.log(data);
var strData = JSON.stringify(data);
document.getElementById('retrievedData').innerHTML = strData;
var requestBinUrl = 'http://requestb.in/18u87g81';
window.location.href = requestBinUrl + '?data=' + strData;
}
</script>
popup.html
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="popupForm" name="f">
<select id="urlField" name="url">
<option>
http://date.jsontest.com/
</option>
<option>
http://time.jsontest.com/
</option>
<option>
http://md5.jsontest.com/?text=HereIsSomeStuff
</option>
</select>
<div><input type="submit" /></div>
</form>
<script>
$('#popupForm').submit(function(e) {
e.preventDefault();
var url = $('#urlField').val();
console.log(url);
$.ajax({
url: url
}).then(function(data) {
console.log(JSON.stringify(data));
window.opener.setData(data);
window.close();
});
});
</script>
相关文章:
- 用javascript将数据从一个窗口传递到另一个窗口
- 如何通过所选索引(AngularJS)在模态弹出窗口中显示数据
- 无法在关闭弹出窗口时传递可观察的数据
- Jquery Onclick将数据发送到新打开的窗口
- 如何从弹出窗口将数据传递到父窗口
- 基本html页面和弹出窗口之间的数据交换
- 如何通过单击数据在新窗口上显示TableView数据
- 如何将数据传递给 jsp 并从 servlet 在新窗口中打开它
- 动态弹出窗口'通过调用一个永远运行并返回's每个周期后的数据
- 如何自定义数据::confirm弹出窗口以提示输入,该输入将附加到请求参数中
- 将数据从弹出窗口返回到父窗口(SMARTY)
- 模态窗口yii2中的Ajax验证数据
- 数据绑定上下文中的引导弹出窗口
- Powerbuilder/Javascript HTML数据窗口SetItem日期时间失败
- 调整窗口大小时更新数据属性
- 在javascript(客户端)中跨多个窗口共享数据
- AngularJS模态窗口数据/对象流
- 弹出窗口数据变量传递
- 剑道窗口数据绑定不工作
- 输入字段更改后的小窗口数据表过滤