Могу ли я управлять двумя окнами браузера с помощью одного приложения HTML5? - PullRequest
Новая
       3

Могу ли я управлять двумя окнами браузера с помощью одного приложения HTML5?

12 голосов
/ 11 марта 2011

Мне бы хотелось, чтобы мое приложение HTML5 рисовало на двух разных экранах. Это (я думаю) означает, что мне нужно иметь два разных окна браузера, по одному на каждом экране. Это возможно? Кажется, что мне действительно нужно загрузить одно и то же приложение в два окна и каким-то образом заставить окна взаимодействовать друг с другом. Я не мог найти пример того, как это сделать. Как я могу это сделать?

Для дополнительной чудесности: Возможно, не задействован сервер, только приложение, обслуживаемое локально из файловой системы.

Ответы [ 2 ]

16 голосов
/ 12 марта 2011

Нет необходимости в грязной инфраструктуре опроса, использующей локальное хранилище или (дрожь) куки. Предполагая, что две страницы обслуживаются из одного и того же домена, реализовать взаимодействие между окнами тривиально, если второе окно открывается первым.

В главном окне: ( нажмите здесь для демонстрации JSFiddle и здесь для кода дополнительной страницы ) 

var win2;
function openSecondaryWindow() {
   return win2 = window.open('win2.html','secondary','width=300,height=100');
}

$(function() {

    if (!openSecondaryWindow()) // Try to open the window.  This will likely be blocked by a popup blocker (unless you disable it).
        $(document.body) // If it is blocked, clicking a link usually allows the popup to be spawned.
        .prepend('<a href="#">Popup blocked.  Click here to open the secondary window.</a>')
        .click(function() { openSecondaryWindow(); return false; });

    $('#somelink').click(function() {
        if (win2) win2.doSomething(); // Obviously, you'll need to define doSomething in the second page
        else alert('The secondary window is not open.');
        return false;
    });
});

Как только вторичное окно будет открыто вашим главным окном, win2 будет ссылаться на объект window второй страницы & ndash; другими словами, глобальная область страницы. У вас будет доступ ко всем функциям и переменным, которые вы определили на второй странице.

Таким образом, вы можете передавать данные через вызовы функций. 

win2.update({ key: 'value', ... });

В дополнительном окне вы можете вызывать функции в главном окне через свойство opener, которое будет ссылаться на объект window вашего главного окна. (Это продемонстрировано в демоверсии JSFiddle.)

Обновление: Интерком - это библиотека, которая использует локальное хранилище для реализации широковещательного обмена сообщениями между окнами. Локальное хранилище запускает событие (onstorage) при изменении данных, поэтому опрос фактически не требуется. Интерком позволяет всем страницам домена общаться, независимо от того, как они были открыты.

0 голосов
/ 11 марта 2011

Вероятно, это то, что вы могли бы использовать websockets , чтобы каждое окно отправляло свою информацию обратно в приложение, а затем обновляло ее, но это не поддерживается во всех браузерах и фактически Я считаю, что в настоящее время удалены из большинства сборок из-за проблем безопасности со спецификацией.

Для автономных приложений, если они находятся в одном домене, который, как я предполагаю, будет локальным, вы могли бы использовать локальное хранилище или даже файлы cookie, а затем провести опрос приложений на предмет изменения API хранилища?

Я недавно провел несколько экспериментов с автономным локальным хранилищем, и я могу локально поддерживать состояние между окнами с Chrome, в Firefox это не работает, но я считаю, что это исправлено в FF4 RC

Редактировать 2:

Сложил быстрое и грязное доказательство концепции в двух файлах:

Индекс 1: 

<body>

<div id="result">x</div>

</body>
<script type="text/javascript">
var i = 0;

function update(){  
    setTimeout(function(){
        localStorage.setItem("bar", i);
        document.getElementById('result').innerHTML = "localstorage set to " + localStorage.getItem("bar");
        i++;
        console.log(i);
        update();          
    }, 2000);
}

update();

</script>

Индекс 2: 

<body>

<div id="result">s</div>

</body>
<script type="text/javascript">

function update(){  
    setTimeout(function(){
        document.getElementById('result').innerHTML = localStorage.getItem("bar");    
        update();
    }, 1000);
}

update();

</script>

Локально открывая их в разных окнах Chrome, второе отобразит состояние, заданное циклом в первом окне. Я все еще не работал в FireFox 4 (Mozilla Dev вчера поклялся мне, что автономное локальное хранилище работает, да ладно). Вы, вероятно, можете заставить его работать в IE через http://www.modernizr.com/, но я еще не проверял это.

...