有啥方法可以将数据从一个浏览器传递到另一个浏览器,比如 chrome 到 firefox

Posted

技术标签:

【中文标题】有啥方法可以将数据从一个浏览器传递到另一个浏览器,比如 chrome 到 firefox【英文标题】:Is there any method to pass data from one browser to another browser like chrome to firefox有什么方法可以将数据从一个浏览器传递到另一个浏览器,比如 chrome 到 firefox 【发布时间】:2021-06-28 18:19:53 【问题描述】:

我有两个不同的页面,一个用于管理员,另一个用于用户。管理页面名称是 index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            * 
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            
            body
                background-color: rgb(255, 255, 255);
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
                text-align: center;
            
            .card
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%;
                padding: 100px;
            

            h2
                margin: 0 50px;
                font-size: 50px;
            
            button
                background-color: #ff9100;
                border: none;
                color: white;
                padding: 15px 32px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 16px;
                margin: 4px 2px;
                cursor: pointer;
                border-radius: 25px;
            
            button:hover
                background-color: rgb(206, 206, 206);
                color: #ff9100;
                border-color: #000 ;
            
        
        </style>
        
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Live Users in Mall</title>
    </head>
    <body>
        <div class="container">
            <h1>Live Users in Mall</h1>
            <div class="card">
                <!--
                    Rather than using `inline` function calls it is 
                    preferable to assign an external event listener.
                    You can easily use the same event handler to 
                    perform both increment and decrement tasks.
                    
                    To aid that the buttons were assign a dataset
                    attribute which is analysed in the click handler.
                -->
                <button data-action='decrement'>-</button>
                <h2>0</h2>
                <button data-action='increment'>+</button>
            </div>
        </div>
        <script>
        
            // Establish the communication channel - this can be (nearly) any name 
            // but the same name is needed for the listeners.
            
            let oChan=new BroadcastChannel( 'tabs' );
            let h2=document.querySelector('div.card h2');
            
            
            // simple function to send a payload of your design
            const sendmessage=function( data )
                let payload= 'data':data ;
                oChan.postMessage( payload );
            ;
    
    
            // fetch the data from localStorage or set as zero
            let data=localStorage.getItem('key');
            if( data == null )data=0;
            else data=Number( data );
            
            h2.innerHTML=data;
            
            
            // assign an event listener for both buttons
            document.querySelectorAll('button[data-action]').forEach( bttn=>
                bttn.addEventListener('click',function(e)
                    switch( this.dataset.action )
                        case 'increment':data++;break;
                        case 'decrement':data--;break;
                    
                    
                    //update storage
                    localStorage.setItem('key',data);
                    
                    // send the message to the "other" page
                    sendmessage( data );
                    
                    // update local display
                    h2.innerHTML=data;
                );
            )
        </script>
    </body>
</html>

另一个页面名称是 showdata.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Show Live Data</title>
    </head>
    <body>
        <h3>Users Present in Mall</h3>
        <h2>0</h2>  
        <script>
            // establish listener on same channel
            let oChan=new BroadcastChannel( 'tabs' );
                oChan.addEventListener('message',(e)=>
                    // process the messages as they arrive
                    document.querySelector('h2').innerHTML=e.data.data
                );
        </script>
    </body>
</html>

我的项目包含两个不同的用户,因此他们将在两个不同的浏览器中打开网站。但是我想在第二个浏览器中向用户(showdata.html)端显示从第一个浏览器的管理员(index.html)更新数据。这可能吗?如果是那么请给我解决方案????????????????????????

【问题讨论】:

你的意思是像pusher.com这样的websockets 【参考方案1】:

是的,我找到了。我们可以在同一浏览器的不同选项卡中使用 websocket 传递数据,并使用后端数据库我解决了这个问题。

【讨论】:

以上是关于有啥方法可以将数据从一个浏览器传递到另一个浏览器,比如 chrome 到 firefox的主要内容,如果未能解决你的问题,请参考以下文章

我可以将 JavaScript 变量传递到另一个浏览器窗口吗?

有啥方法可以将价值从一个单元格转移到另一个单元格?

将数据从 Windows 挂钩传递到另一个进程的最佳方法是啥?

是否可以在没有点击事件及其方法的情况下使用服务将数据从一个组件传递到另一个组件?

如何使用 post 方法将 JSON 数据从登录功能传递到另一个视图控制器?

有啥方法可以将数据从谷歌电子表格传递到 clickhouse?