有啥方法可以将数据从一个浏览器传递到另一个浏览器,比如 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 挂钩传递到另一个进程的最佳方法是啥?
是否可以在没有点击事件及其方法的情况下使用服务将数据从一个组件传递到另一个组件?