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...