jQuery обновлять другой HTML только в том случае, если обе страницы, открытые в одном браузере, не могут подключиться удаленно!
Есть ли реальное решение для подключения обоих html документов для их удаленного использования на стороне внешнего интерфейса и на стороне сервера из в разных местах?
Может быть, есть какое-то PHP решение или простой способ?
Этот скрипт предназначен для пользователей OSX с более низким рейтингом, у которых нет браузера в OBS studio
1 HTML - бэкэнд
<body class="lower-thirds-panel panel">
<div class="static-panel-top">
<input id="lower-thirds-name" placeholder="Vārds Uzvārds">
<input id="lower-thirds-function" placeholder="Amats">
<button class="onethird" id="sender" onclick="function_send()">Rādīt</button>
<button class="onethird" id="sender" onclick="function_hide()">Slēpt</button>
<div class="radio-position">
<input type="radio" name="radio-group-position" id="position-left"
checked="checked" /><label for="position-left">Labā puse</label>
<input type="radio" name="radio-group-position" id="position-right" /><label
for="position-right">Kreisā puse</label>
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="panel-bottom">
<h3>Titru saraksts</h3>
<ul id="predefined">
<li><div class="name">Vārds</div><div class="function">Amats</div></li>
<li><div class="name">Vārds</div><div class="function">Amats</div></li>
<li><div class="name">Vārds</div><div class="function">Amats</div></li>
<li><div class="name">Vārds</div><div class="function">Amats</div></li>
<li><div class="name">Vārds</div><div class="function">Amats</div></li>
<li><div class="name">Vārds</div><div class="function">Amats</div></li>
</ul>
<div>
<script>
$("ul#predefined li").click(function(){
cur_name=$(this).children('.name').text();
cur_function=$(this).children('.function').text();
$("#lower-thirds-name:text").val(cur_name);
$("#lower-thirds-function:text").val(cur_function);
});
var bc = new BroadcastChannel('obs-lower-thirds-channel');
function function_send() {
name_to_send = $("#lower-thirds-name:text").val();
function_to_send = $("#lower-thirds-function:text").val();
if (document.getElementById("position-left").checked == true) {position = "left"};
if (document.getElementById("position-right").checked == true) {position = "right"};
bc.postMessage(name_to_send + '|' + function_to_send + '|' + position + '|' +
'animateIn'); /* send */
};
function function_hide() {
bc.postMessage('|||animateOut'); /* send - only last parameter*/
}
</script>
</body>
2 HTML клиент
<title>TITRI LIVE</title>
<script>
var bc = new BroadcastChannel('obs-lower-thirds-channel');
bc.onmessage = function (ev) {
received_data=ev.data.split("|");
document.getElementById("name").innerHTML = received_data[0];
document.getElementById("function").innerHTML = received_data[1];
position = received_data[2];
animation = received_data[3];
console.log ('Name: ' + received_data[0] + ', Function: ' + received_data[1] + ',
Position: ' + received_data[2] + ', Animation: ' + received_data[3]);
if (animation == 'animateIn') {document.getElementById("lower-
third").classList.remove("animateOut");document.getElementById("lower-
third").classList.add("animateIn");};
if (animation == 'animateOut') {document.getElementById("lower-
third").classList.remove("animateIn");document.getElementById("lower-
third").classList.add("animateOut");};
if (position == 'left') {document.getElementById("lower-
third").classList.remove("right");document.getElementById("lower-
third").classList.add("left");};
if (position == 'right') {document.getElementById("lower-
third").classList.remove("left");document.getElementById("lower-
third").classList.add("right");};
}
</script>
</head>
<body class="browser-source lower-thirds">
<div id="lower-third">
<div class="left-block">
<img src="../common/images/logo.png">
</div>
<div class="right-block">
<div id="name"></div>
<div id="function"></div>
</div>
</div>
</div>
</body>