Pessoal, estou pesquisando isso há quase uma semana e não acho resposta.
Tenho uma Window.js do projeto “prototype window”, coloco parte do código abaixo, e ela usa para abrir uma janela no navegador o parametro “parent”, que é o document.body do contexto onde a nova janela será aberta.
O problema é que não consigo fazer referencia à janela principal do navegador… então ele fica sempre abrindo uma janela dentro da outra. Como faço?
valeu
var Window = Class.create();
Window.keepMultiModalWindow = false;
Window.hasEffectLib = (typeof Effect != 'undefined');
Window.resizeEffectDuration = 0.4;
Window.prototype = {
// Constructor
// Available parameters : className, blurClassName, title, minWidth, minHeight, maxWidth, maxHeight, width, height, top, left, bottom, right, resizable, zIndex, opacity, recenterAuto, wiredDrag
// hideEffect, showEffect, showEffectOptions, hideEffectOptions, effectOptions, url, draggable, closable, minimizable, maximizable, parent, onload
// add all callbacks (if you do not use an observer)
// onDestroy onStartResize onStartMove onResize onMove onEndResize onEndMove onFocus onBlur onBeforeShow onShow onHide onMinimize onMaximize onClose
initialize: function() {
var id;
var optionIndex = 0;
// For backward compatibility like win= new Window("id", {...}) instead of win = new Window({id: "id", ...})
if (arguments.length > 0) {
if (typeof arguments[0] == "string" ) {
id = arguments[0];
optionIndex = 1;
}
else
id = arguments[0] ? arguments[0].id : null;
}
// Generate unique ID if not specified
if (!id)
id = "window_" + new Date().getTime();
if ($(id))
alert("Window " + id + " is already registered in the DOM! Make sure you use setDestroyOnClose() or destroyOnClose: true in the constructor");
this.options = Object.extend({
className: "dialog",
blurClassName: null,
minWidth: 100,
minHeight: 20,
resizable: true,
closable: true,
minimizable: true,
maximizable: true,
draggable: true,
userData: null,
showEffect: (Window.hasEffectLib ? Effect.Appear : Element.show),
hideEffect: (Window.hasEffectLib ? Effect.Fade : Element.hide),
showEffectOptions: {},
hideEffectOptions: {},
effectOptions: null,
parent: document.body,
title: " ",
url: null,
onload: Prototype.emptyFunction,
width: 200,
height: 300,
opacity: 1,
recenterAuto: true,
wiredDrag: false,
closeCallback: null,
destroyOnClose: false,
gridX: 1,
gridY: 1,
conteudo: null
}, arguments[optionIndex] || {});
if (this.options.blurClassName)
this.options.focusClassName = this.options.className;
if (typeof this.options.top == "undefined" && typeof this.options.bottom == "undefined")
this.options.top = this._round(Math.random()*500, this.options.gridY);
if (typeof this.options.left == "undefined" && typeof this.options.right == "undefined")
this.options.left = this._round(Math.random()*500, this.options.gridX);
if (this.options.effectOptions) {
Object.extend(this.options.hideEffectOptions, this.options.effectOptions);
Object.extend(this.options.showEffectOptions, this.options.effectOptions);
if (this.options.showEffect == Element.Appear)
this.options.showEffectOptions.to = this.options.opacity;
}
if (Window.hasEffectLib) {
if (this.options.showEffect == Effect.Appear)
this.options.showEffectOptions.to = this.options.opacity;
if (this.options.hideEffect == Effect.Fade)
this.options.hideEffectOptions.from = this.options.opacity;
}
if (this.options.hideEffect == Element.hide)
this.options.hideEffect = function(){ Element.hide(this.element); if (this.options.destroyOnClose) this.destroy(); }.bind(this)
if (this.options.parent != document.body)
this.options.parent = $(this.options.parent);
this.element = this._createWindow(id);
this.element.win = this;
// Bind event listener
this.eventMouseDown = this._initDrag.bindAsEventListener(this);
this.eventMouseUp = this._endDrag.bindAsEventListener(this);
this.eventMouseMove = this._updateDrag.bindAsEventListener(this);
this.eventOnLoad = this._getWindowBorderSize.bindAsEventListener(this);
this.eventMouseDownContent = this.toFront.bindAsEventListener(this);
this.eventResize = this._recenter.bindAsEventListener(this);
this.topbar = $(this.element.id + "_top");
this.bottombar = $(this.element.id + "_bottom");
this.content = $(this.element.id + "_content");
Event.observe(this.topbar, "mousedown", this.eventMouseDown);
Event.observe(this.bottombar, "mousedown", this.eventMouseDown);
Event.observe(this.content, "mousedown", this.eventMouseDownContent);
Event.observe(window, "load", this.eventOnLoad);
Event.observe(window, "resize", this.eventResize);
Event.observe(window, "scroll", this.eventResize);
Event.observe(this.options.parent, "scroll", this.eventResize);
if (this.options.draggable) {
var that = this;
[this.topbar, this.topbar.up().previous(), this.topbar.up().next()].each(function(element) {
element.observe("mousedown", that.eventMouseDown);
element.addClassName("top_draggable");
});
[this.bottombar.up(), this.bottombar.up().previous(), this.bottombar.up().next()].each(function(element) {
element.observe("mousedown", that.eventMouseDown);
element.addClassName("bottom_draggable");
});
}
if (this.options.resizable) {
this.sizer = $(this.element.id + "_sizer");
Event.observe(this.sizer, "mousedown", this.eventMouseDown);
}
this.useLeft = null;
this.useTop = null;
if (typeof this.options.left != "undefined") {
this.element.setStyle({left: parseFloat(this.options.left) + 'px'});
this.useLeft = true;
}
else {
this.element.setStyle({right: parseFloat(this.options.right) + 'px'});
this.useLeft = false;
}
if (typeof this.options.top != "undefined") {
this.element.setStyle({top: parseFloat(this.options.top) + 'px'});
this.useTop = true;
}
else {
this.element.setStyle({bottom: parseFloat(this.options.bottom) + 'px'});
this.useTop = false;
}
this.storedLocation = null;
this.setOpacity(this.options.opacity);
if (this.options.zIndex)
this.setZIndex(this.options.zIndex)
if (this.options.destroyOnClose)
this.setDestroyOnClose(true);
this._getWindowBorderSize();
this.width = this.options.width;
this.height = this.options.height;
this.visible = false;
this.constraint = false;
this.constraintPad = {top: 0, left:0, bottom:0, right:0};
if (this.width && this.height)
this.setSize(this.options.width, this.options.height);
this.setTitle(this.options.title)
Windows.register(this);
},
naum seria usar apenas $(window) para fazer referencia ao navegador ?
Cristian, sei mto pouco de javaascript… tentei isso e não deu certo. Como eu faria para fazer referencia ao document.body da janela que é exibida no navegador, a primeira?
é, já tetei de tudo
bom voce pode pegar o body assim
$(‘body’)
ou
document.body
simples…
sim, mas esse é o problema:
pagina 1 abre janela 2, janela 2 abre janela 3. Preciso que a janela 3 seja aberta fora da janela 2, mas ela abre dentro… porque? Creio que seja porque o ducument que eu passo para janela 3 como parent seja o da element da janela 2.
da uma olhada no final desse metodo:
_createWindow: function(id) {
var className = this.options.className;
var win = document.createElement("div");
win.setAttribute('id', id);
win.className = "dialog";
var content;
if (this.options.url)
content= "<iframe frameborder=\"0\" name=\"" + id + "_content\" id=\"" + id + "_content\" src=\"" + this.options.url + "\"> </iframe>";
else
content ="<div id=\"" + id + "_content\" class=\"" +className + "_content\"> </div>";
var closeDiv = this.options.closable ? "<div class='"+ className +"_close' id='"+ id +"_close' onclick='Windows.close(\""+ id +"\", event)'> </div>" : "";
var minDiv = this.options.minimizable ? "<div class='"+ className + "_minimize' id='"+ id +"_minimize' onclick='Windows.minimize(\""+ id +"\", event)'> </div>" : "";
var maxDiv = this.options.maximizable ? "<div class='"+ className + "_maximize' id='"+ id +"_maximize' onclick='Windows.maximize(\""+ id +"\", event)'> </div>" : "";
var seAttributes = this.options.resizable ? "class='" + className + "_sizer' id='" + id + "_sizer'" : "class='" + className + "_se'";
var blank = "../themes/default/blank.gif";
win.innerHTML = closeDiv + minDiv + maxDiv + "\
<table id='"+ id +"_row1' class=\"top table_window\">\
<tr>\
<td class='"+ className +"_nw'></td>\
<td class='"+ className +"_n'><div id='"+ id +"_top' class='"+ className +"_title title_window'>"+ this.options.title +"</div></td>\
<td class='"+ className +"_ne'></td>\
</tr>\
</table>\
<table id='"+ id +"_row2' class=\"mid table_window\">\
<tr>\
<td class='"+ className +"_w'></td>\
<td id='"+ id +"_table_content' class='"+ className +"_content' valign='top'>" + content + "</td>\
<td class='"+ className +"_e'></td>\
</tr>\
</table>\
<table id='"+ id +"_row3' class=\"bot table_window\">\
<tr>\
<td class='"+ className +"_sw'></td>\
<td class='"+ className +"_s'><div id='"+ id +"_bottom' class='status_bar'><span style='float:left; width:1px; height:1px'></span></div></td>\
<td " + seAttributes + "></td>\
</tr>\
</table>\
";
Element.hide(win);
[b] this.options.parent.insertBefore(win, this.options.parent.firstChild);[/b]
Event.observe($(id + "_content"), "load", this.options.onload);
return win;
},nada?