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

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

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

Ответ 1

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

В главном окне: (нажмите здесь для демонстрации 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.)

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

Ответ 2

Возможно, это что-то, что вы могли бы использовать 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/, но мне еще предстоит проверить это.