7

Estou pensando em utilizar o recurso nativo window.open() para criar um pequeno sistema web que seja similar a sistemas desktop (feitos com o windows forms). Meu problema é em relação a comunicação e manipulação de dados/eventos entre 2 janelas.

Preciso saber como posso manipular janelas instanciadas a partir de uma janela pai, atualizando seu DOM, executando funções, etc...

1 Resposta 1

6

Uma maneira de se manipular a window do window.open() é guardando a sua declaração em uma variável. Por exemplo:

var win = window.open("pagina.html", "", "width=400, height=400");

No exemplo acima, irá abrir a pagina.html com uma largura e uma altura de 400px.

Os argumentos são, respectivamente: origem, windowName e atributos.


Você também pode abrir uma janela vazia e inserir dados manualmente, porém isso é bastante limitado. Você faria isso basicamente com o document.write(), da seguinte maneira.

win.document.write(seu html);
win.document.write("<img src='img.jpg' alt='' />"); // por exemplo

Você não pode usar o .innerHTML já que não possui HTML ainda.


Uma outra técnica é esta:

var popup = window.open("", "popup", "width=400, height=400");
popup.document.write("<html><head><title>Exemplo</title></head><body>");
// Captura a div#content e insere seu conteudo HTML na popup
popup.document.write(document.getElementById('content').innerHTML);

popup.document.write("</body></html>");

E que você insere na window um conteúdo já existente algum local de seu site.


Para manipular os elementos você pode usar JQuery, assim:

var body = $("body", popup.document); // especifica-se o documento como segundo argumento.

Pode inserir elementos:

body.append('<input type="text"/>')

E por aí vai...


Aqui vai um exemplo de funções:

var popup = window.open("", "popup", "width=200, height=100");
popup.document.write("<html><head><title></title></head><body></body></html>");

var body = $("body", popup.document);
body.append('<input type="text" id="texto"> <br> <span><span>');

var text = body.children('input:text');
var span = body.children('span');
text.keyup(function() {
  span.text(text.val())
})

Um modo de manipular os elementos da popup, sendo que estes elementos são pertencentes a uma outra página, é usar o .load() do jquery, fiz testes com o .ready(), mas não obtive sucesso. Ficaria algo como isto:

var popup = window.open("exemplo.html", "popup", "width=200, height=100");
// No load declara-se a popup
$(popup).load(function(){
    var body = $('body', popup.document); //seleciona o body com a declaração do documento da popup
    body.css('background', '#333');
})

Assim, você ficaria livre para configurar os elementos já criados em outra página.

Obs.: A manipulação do DOM em uma popup não funciona no Chrome no protocolo file. Já no protocolo http funciona normalmente, assim como no Firefox.

Espero que tenha ajudado...

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .