Javascript 如何从弹出窗口将数据传递到父窗口？

如何从弹出窗口在父窗口上传递数据或调用函数

用户将单击一个链接，该链接将在同一网站上打开一个弹出窗口，完成弹出窗口后，我希望它将新数据发送回父窗口，或调用父窗口上的函数。

该对象就是您要查找的对象，从弹出窗口中使用它来调用父窗口的函数：

window.opener.yourFunc() 

---

这是一个有趣且简单的演示，它的灵感来源于（但为了帮助调查而修改）

创建2个文件（在同一目录中），如下所示：

parent.html

<button type="button" onclick="popup('popup.html', '', 800, 200);">Add My Card</button>
=&gt;
<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>

<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>

添加我的卡
=
还没有数据。
功能弹出窗口（url、标题、宽度、高度）{
左侧变量=（screen.width/2）-（width/2）；
变量top=（screen.height/2）-（height/2）；
var选项=“”；
选项+='，宽度='+宽度；
选项+='，高度='+高度；
选项+='，顶部='+顶部；
选项+='，左='+左；
返回窗口。打开（url、标题、选项）；
}
函数setData（数据）{
控制台日志（数据）；
var strData=JSON.stringify（数据）；
document.getElementById（'retrievedData'）。innerHTML=strData；
var requestBinUrl=http://requestb.in/18u87g81';
window.location.href=requestBinUrl+'？数据='+strData；
}

popup.html

<button type="button" onclick="popup('popup.html', '', 800, 200);">Add My Card</button>
=&gt;
<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>

<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>

http://date.jsontest.com/
http://time.jsontest.com/
http://md5.jsontest.com/?text=HereIsSomeStuff
$（'popupForm'）。提交（函数（e）{
e、 预防默认值（）；
var url=$（'#urlField'）.val（）；
console.log（url）；
$.ajax({
url:url
}).then（功能（数据）{
log（JSON.stringify（data））；
window.opener.setData（数据）；
window.close（）；
});
});    

popup是什么意思？你是说当popup窗口是跨域的时，用_blank打开的窗口在IE中不起作用。我看到错误：访问属性yourFunc（）的权限被拒绝，但window.parent.document.getElementById（'panelControlId'）对我有效。它为保存此子窗口的面板提供了句柄，从而允许调用pnl.style.display='none'；它在IE11中不起作用，因为IE11不支持opener。