将控制台写入未链接的 html答案

【问题标题】：Writing to console to an html that is not linked将控制台写入未链接的 html
【发布时间】：2021-10-08 08:51:58
【问题描述】：

我的问题如下：是否可以将 .js 文件中的内容写入非链接 HTML 文件的控制台？

所以我有以下设置：当单击 html_1(index.html) 上的按钮时，它会打开一个新窗口，该窗口有一个名为 html_2(numero.html) 的 HTML。我想在弹出窗口打开时在 index.html 的控制台中写一些东西（使用 onload）。两个 HTML 文件都链接到各自独立的 .js 文件（index.js 和 numero.js）。我想从 numero.js 到 index.html 写入控制台，但它们没有链接。

这可能吗？

我现在拥有的。

HTML 索引 <button onclick="newWindow();" id="ventana" >ACIERTA NUMERO</button> 打开新窗口。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="Stylesheet1.css">
    <script type="text/javascript" src="objectosPredef.js"></script>
    <title>Actividad 2</title>
</head>
<body onload="listaPropiedades()">
    <div id="listaPropiedades"></div>
    
    <input type="text" id="nombre" placeholder="entra tu nombre" />
    <button onclick="crearCookie();">Click</button>
    <button onclick="newWindow();" id="ventana" >ACIERTA NUMERO</button>
</body>

</html>

Index.js

function newWindow(url, title, w, h) {
    var url = "numero.html";
    var title = "";
    var w = 300;
    var h = 300;
    var left = (screen.width / 2) - (w / 2);
    var top = (screen.height / 2) - (h / 2);
    return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
}

HTML 数字

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    
    <script type="text/javascript" src="numero.js"></script>
    <title>count down</title>
</head>
<body onload="windowTimer()">
    <div id="random"></div>
    <div id="timer"></div>
    
</body>
</html>

Numero JS

function windowTimer() {
    consoleLog();

    var sec = 8;
    setInterval(function () {
        document.getElementById("timer").innerHTML = sec + " :segundos";
        
        sec--;
        if (sec == -1) {
            window.close();
        }
    }, 1000);
}

function consoleLog() {
    var x = Math.floor((Math.random() * 11));
    document.getElementById("random").innerHTML = "Numero aleatorio: " + x;
}

目前它只是将随机数写入窗口，但它应该转到 index.html 的控制台日志。我找不到任何关于此的内容。任何帮助表示赞赏。

【问题讨论】：

您可以使用 BroadcastChannel 之类的东西在父窗口和弹出窗口之间进行通信 - 并使用它来触发对控制台的写入？

标签： javascript html css console

【解决方案1】：

为了说明我所做的评论，我根据问题快速整理了一个包含两个文件 index.html 和 numero.html 的小演示。

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Index.html</title>
    </head>
    <body>
    
        <button onclick="newWindow();" id="ventana">ACIERTA NUMERO</button>
        
        
        <script>
            function newWindow( url = "numero.html", title = "", w = 300, h = 300 ) {
                var left = (screen.width / 2) - (w / 2);
                var top = (screen.height / 2) - (h / 2);
                return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left);
            }
        
        
            let oChannel=new BroadcastChannel( 'numero' );
                oChannel.addEventListener('message',(e)=>{
                    if( e.data.number )console.info('Random Number generated in "numero.html": %s', e.data.number )
                    else console.info( e.data.data )
                });
        </script>
    </body>
</html>

numero.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Numero.html</title>
    </head>
    <body>
        <div id="random"></div>
        <div id="timer"></div>
        <script>
            document.addEventListener('DOMContentLoaded',()=>{
            
                let oChannel=new BroadcastChannel( 'numero' );
                
                const Log=()=>{
                    let i=Math.floor( ( Math.random() * 11 ) );
                    document.getElementById("random").innerHTML = "Numero aleatorio: " + i;
                    console.info('Numero aleatorio: %d',i);
                    return i;
                };
                
                function windowTimer() {
                    let sec=8;
                    
                    setInterval(function () {
                        if( sec > 0 ){
                            oChannel.postMessage({data:sec})
                            document.getElementById("timer").innerHTML = sec + " :segundos";
                        }else if( sec==0 ) {
                            oChannel.postMessage({data:'Goodbye'});
                            window.close();
                        }
                        
                        sec--;
                        
                    }, 1000 );
                };
                
                let _random_number=Log();
                oChannel.postMessage( { data:'loaded', number:_random_number } );
                
                windowTimer();
            })
            
        </script>
    </body>
</html>

两个页面都必须创建自己与公共频道的连接 - 名称是任意的，但两者必须相同。 index 页面 listens 用于来自子弹出页面 numero.html 的消息，并显示使用 postMessage 函数由弹出窗口发送的数据。

【讨论】：

感谢您的努力，我有点理解您在做什么，但我没有让它工作......所以这是给初学者 Javascript 学生的，在我的书中我找不到任何关于你的方法。我遇到的问题是：““number.js”中的程序，一旦加载 HTML，index.html 控制台就会生成并显示 0 到 10（包括在内）之间的随机数。”跨度>
这个问题没有暗示两个 HTML 文件 - 只是 1 个 html 页面和 1 个 javascript 文件，这与这里提出的问题有很大不同。如果numero.js 文件在numero.html 中，但您想写入index.html 的控制台，那么您需要这些元素之间的某种通信方法，否则它们是完全独立的。
是的，这就是最终目标。很难提出问题
我创建的上面的 2 个页面将执行窗口间通信，但唯一不在该等式中的是外部 numero.js 文件 - 在我的 numero.html 文件中看到的 javascript 很容易在您的场景中放置在numero.js 中
很高兴能够提供指导和帮助！祝您在接下来的编码冒险中好运。