如何从独立弹窗的numero.js向父页index.html的控制台输出内容

结论 #

该需求完全可以实现，只要两个页面属于同源（同协议、同域名、同端口）站点，有两种常用实现方式：

方案1：直接通过window.opener调用父窗口控制台（同源场景首选） #

实现原理 #

通过window.open打开的同源子窗口，内置window.opener属性指向父窗口的全局window对象，可直接访问父窗口的console对象输出日志。

修改代码 #

仅需修改numero.js中的consoleLog函数即可：

function consoleLog() {
    var x = Math.floor((Math.random() * 11));
    document.getElementById("random").innerHTML = "Numero aleatorio: " + x;
    // 新增逻辑：输出到父窗口控制台
    if (window.opener && !window.opener.closed) {
        window.opener.console.log('子窗口生成的随机数为：', x);
    }
}

添加的判断逻辑用于避免父窗口已关闭时，子窗口调用属性抛出异常。

方案2：通过postMessage通信（兼容跨源场景） #

如果后续两个页面部署到不同域名下，可使用postMessage完成跨源通信，步骤如下：

1. 父窗口index.js添加全局监听代码：

// 放在index.js的全局作用域即可
window.addEventListener('message', function(e) {
    // 建议添加origin校验，过滤非法消息，示例：if(e.origin !== 'https://你的域名.com') return;
    console.log('收到子窗口传递的随机数：', e.data);
});

2. 修改numero.js的consoleLog函数，发送消息给父窗口：

function consoleLog() {
    var x = Math.floor((Math.random() * 11));
    document.getElementById("random").innerHTML = "Numero aleatorio: " + x;
    // 给父窗口发消息
    if (window.opener && !window.opener.closed) {
        // 第二个参数指定允许接收的域名，生产环境不要用*，填写实际父窗口域名
        window.opener.postMessage(x, '*');
    }
}

内容的提问来源于stack exchange，提问作者Samuel Van Bladel