我正在制作一个网站，该网站需要具有一个界面，我可以在其中选择一个选项并推送该选项，以更新在不同浏览器中运行的同一网站上的文本。到目前为止，我已经有了可以在第一个浏览器上更新文本的代码，但在另一个浏览器上却没有。
的HTML
<select id="currentEvent">
<option value="" disabled selected>Current Event</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<button type="button" onclick="GetSelectedText()">Push Changes</button>
JS
function GetSelectedText() {
var e = document.getElementById("currentEvent");
var result = e.options[e.selectedIndex].text;
document.getElementById("selectedEvent").innerHTML = result;
}
我只需要在每个浏览器上更新一行文本，所以请尽量简化，因为我仍在学习HTML并且是Web开发的新手。
提前致谢 ：）
我花了一点时间..用repl.it做了一个例子..不要介意C文件，我就像自由环境下的C ..专注于backend.js和frontend.html
其概念是，每个选项卡/客户端都获得一个新密钥，客户端发送其密钥，并循环查找数据，当有数据时，它将document.getElementById("selectedEvent") .innerHTML带有响应文本的元素放入。但是，在该按钮中，它将发送一个帖子，该帖子会将文本放入共享输入密钥server object's的选项卡的密钥中。搜寻数据和放置数据的结合使它像魅力一样工作
backend.js
var http=require('http')
var fs=require('fs')
function randomChar(){
var m=Math.random; var f=Math.floor
var arr=["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z",
0,1,2,3,4,5,6,7,8,9,"!","@","$","&","*","(","-","_","=","+","[","]","'","~"]
var newChar=""
for(var i=0; i<f(m()*100+20); i++){newChar+=arr[f(m()*arr.length)]}
return newChar
}
var obj={}
function frontEnd(){
var specialChar=randomChar(); obj[specialChar]=""
return `<script>window.key="${specialChar}"</script>`+
fs.readFileSync(__dirname + '/frontend.html')
.toString().split('')
.map(a=>{if(a=="\\"){return(specialChar)}return(a)})
.join('')
}
//server stuff below
var server=http.createServer((req,res)=>{
if(req.method=="GET"){res.write(frontEnd())}
else if(req.method=="POST"){
if(req.headers.pw&&req.headers.inp){
if(obj[req.headers.pw]!=undefined){obj[req.headers.pw]=req.headers.inp}
}
else if(req.headers.receive&&req.headers.key){
res.write(obj[req.headers.key]||"")
}
else if(req.headers.end=="yes"&&req.headers.key){
delete(obj[req.headers.key])
console.log(`a key ${req.headers.key} was deleted`)
}
}
res.end()
})
server.listen(8080)
frontend.html
<html>
<h3>for this tab manipulation, so that you cannot edit all tabs connected to this site, you need to know the <bold>KEY</bold> of someone else's tab</h3>
<p>your key is <bold>\</bold></p>
<input placeholder="enter other tab's key here" id="inp" />
<select id="currentEvent">
<option value="" disabled selected>Current Event</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<button type="button" onclick="GetSelectedText()">Push Changes</button>
<h4 id="selectedEvent"></h4>
<script>
//loop checking for incoming changes (empty input("") means it would me treated as no input)
var select=document.getElementById("selectedEvent");
(async()=>{
var options={
method:'POST',
headers:{'receive':'true','key':key}
}
while(true){
let x=await fetch(location.href,options)
let text=await x.text()
if(text){select.innerHTML=text}
}
})()
//now for the button
function GetSelectedText() {
var e = document.getElementById("currentEvent");
var result = e.options[e.selectedIndex].text;
select.innerHTML = result;
//sends an outgoing request that will edit the other tab
var xhr=new XMLHttpRequest()
xhr.open('POST',location.href,true)
var inp=document.getElementById('inp')
xhr.setRequestHeader('pw',inp.value)
xhr.setRequestHeader('inp',result)
xhr.send()
}
//now for a listener that will attempt to delete the key from the server as it closes
window.onbeforeunload = async function(){
await fetch(location.href,{method:'POST',headers:{'end':'yes'}})
//put return in front of the 'await' word in line above
//and a confirm would appear when you try to close
}
</script>
</html>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句