My question is the following: Is it possible to write something from a .js file to the console of a non-linked HTML file?
So I have the following setup: When clicking on a button on html_1(index.html) it opens a new window and this window has an HTML called html_2(numero.html). I would like when the popup window opens to write something (with onload) in the console of index.html. Both HTML files are linked to their own separate .js files (index.js and numero.js). I wanna write to the console from numero.js to index.html tho they are not linked.
Is this even possible?
what I have at the moment.
HTML Index
<button onclick="newWindow();" id="ventana" >ACIERTA NUMERO</button>
opens the new window.
<!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 numero
<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;
}
At the moment it just writes the random number to the windows but it should go to the console log of index.html. I could not find anything regarding this. Any help is appreciated.
To illustrate the comment I made I quickly rattled up a small demo with 2 files, index.html
and numero.html
, as per the question.
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>
Both pages must create their own connection to a common channel - the name is arbitrary but must be the same in both. The index
page listens
for messages from the child popup page numero.html
and displays the data that is sent by the popup using the postMessage
function.