时间戳

首页 > 解决方案 > 如何在两个不同的相同网页上显示选定的选项？

javascript - 如何在两个不同的相同网页上显示选定的选项？

问题描述

我对网页和 HTML 很陌生，我不确定解决这个程序的最简单方法是什么。我有一个基本网页，可以从标签中获取数据，然后我有一个按钮可以将其推送到网页上的某个部分。

HTML

<div id="footer">
   <p id="selectedEvent">Event</p>
</div>

<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;
}

我想要做的是更新在另一个选项卡中运行的此代码的另一个实例上的文本，以便两个网页在将其推送到其中一个后显示所选选项。最简单的方法是什么？

编辑 我将简要解释我的用例以获得更多有用的响应。我将其用作 OBS 的覆盖和界面作为浏览器源，因此该解决方案基本上需要能够跨不同的浏览器（例如 Chrome 和 Firefox）同步

提前致谢！

标签： javascripthtml

解决方案

这是你想要的吗？

var e = document.getElementById("currentEvent");

function GetSelectedText() {
    var selected = e.options[e.selectedIndex];
    document.getElementById("selectedEvent").innerHTML = selected.text;

    if (typeof(Storage) !== "undefined") { 
        localStorage.setItem("s_option", selected.text);
        localStorage.setItem("s_option_value", selected.value);
    }
}

function show_result() {
    document.getElementById("selectedEvent").innerHTML = localStorage.getItem("s_option");
    document.getElementById("currentEvent").value = localStorage.getItem("s_option_value");
}

window.addEventListener("storage", show_result);
e.addEventListener("change", GetSelectedText);

推荐阅读