display text on a child window in javascript

I have an html page with a form

<form>
   test : <input type="text" id="mot">
   <button type="button" onclick="send()">Envoi</button>
   <button type="button" onclick="openNewWindow()">nouveau</button>
   <button type="button" onclick="refresh()">Refresh</button>
</form> 

and another html page with a div

<div id=result></div>

I’m trying to display the text entered in the form to the child window with the div. I create the new windows with the “openNewWindow” function. I can refresh that windows with the “refresh” function. But the send function does not work.

var childWindow = ""
var newTabUrl = "./display.html"


function send(){
  document.querySelector("#result").innerHTML = document.querySelector("#mot").value;
  childWindow.document.querySelector("#result").innerHTML = document.querySelector("#mot").value;
}

function openNewWindow(){
  childWindow = window.open(newTabUrl,"display");
}

function refresh(){
  childWindow.location.href=newTabUrl;
}

Can someone help me?

Answer

I mentioned in a comment that the BroadcastChannel API might be a perfect candidate for your needs so put together a quick demo to illustrate how it might be used. For the demo there are essentially 3 files – 2 html and 1 javascript. I appreciate that you have found an example but I had put together a demo so thought I should share it.

index.html

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>MOT-Form</title>
        <script src='app.js'></script>
    </head>
    <body>
    
        <form method='post' name='app'>
            <label>Test : <input type='text' name='mot' /></label>
            <button type='button' data-task='open' title='Open new window'>Nouveau</button>
            <button type='button' data-task='send' title='Send data to child window'>Envoi</button>
            <button type='button' data-task='refresh' title='Refresh child window'>Refresh</button>
            <button type='button' data-task='close' title='Close the child window'>Close</button>
        </form>
        
        <div id='result'></div>
        
        <script>
            (function(){
                /*
                    Establish base options for the app
                    and create a new BroadcastChannel
                    - event listeners are bound when the
                    channel has been created and have 
                    access to the `channel` object 
                    returned/resolved by the `createchannel`
                    method.
                    
                    BroadcastChannel is bi-directional but
                    we only need in a single direction.
                */
                createchannel( _CHANNELNAME )
                    .then( channel=>{
                        let win=false;
                        
                        const w=800;
                        const h=600;
                        
                        const options={
                            menubar:0,
                            location:0,
                            resizable:0,
                            scrollbars:0,
                            status:0,
                            width:w,
                            height:h,
                            left:( ( screen.availWidth - w ) / 2 ),
                            top:( ( screen.availHeight - h ) / 2 )
                        };
                        const mot=document.forms.app.mot;
                        const result=document.getElementById('result');
                        const bttns=document.forms.app.querySelectorAll('button[data-task]');
                        
                        
                        
                        bttns.forEach( bttn => bttn.addEventListener('click', function(e){
                            try{
                                switch( this.dataset.task ){
                                    case 'send':
                                        result.textContent=mot.value;
                                        return sendmessage( channel, 'message', mot.value );
                                    case 'open':
                                        win=openwindow( 'popup.html', 'popup', options );
                                    break;
                                    case 'refresh':
                                        mot.value='';
                                        result.textContent='';
                                        
                                        return sendmessage( channel, 'refresh', null );
                                    case 'close':
                                        if( win )win.close();
                                    break;
                                }
                            }catch(err){
                                console.log(err.message)
                            }
                        }))                         
                    })
            })();
        </script>
    </body>
</html>

popup.html

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>MOT-Popup</title>
        <script src='app.js'></script>
    </head>
    <body>
        <div id='result'></div>
        <script>
            (function(){
            
                const callback=(e)=>{
                    if( e.data.type=='refresh' )location.reload(true);
                    document.querySelector('div#result').textContent=e.data.payload;
                    console.info(e);
                };
                
                createchannel( _CHANNELNAME, callback )
                    .then( channel => {
                        console.log( channel )
                    });
            })();
        </script>
    </body>
</html>

app.js

const _CHANNELNAME='mot-app';

/*
    shorthand for node.querySelector(expr)
    
    e:expression
    n:parent node
*/
const q=(e,n=document)=>n.querySelector(e);


/*
    Using a Promise to chain the creation of the
    BroadcastChannel to other functionality.
    
    name: name of the BroadcastChannel to create/subscribe to
    callback: the function that is executed when a message is received
*/
const createchannel=function(name,callback){
    return new Promise((resolve,reject)=>{
        let oChannel=new BroadcastChannel( name );
        
        if( callback ){
            oChannel.addEventListener('message',(e)=>{
                callback( e );
            });
            oChannel.addEventListener('messageerror',e=>{
                console.log(err);
            });
        }
        resolve( oChannel );
    })
};


/*
    utility to send formatted 
    message over BroadcastChannel
    
    c:channel
    t:type
    d:data
*/
const sendmessage=(c,t,d) => c && d!='' ? c.postMessage({'type':t,'payload':d}) : false;


/*
    utility to open a new window
    attributes supplied as an object
    
    u:url
    n:name
    a:attributes
*/
const openwindow=(u,n,a)=>window.open(u,n,Object.keys(a).map(k=>[k,a[k]].join('=')));