[javascript] alternatief voor JS-popup? Popup geblokkeerd - Softwareontwikkeling

donderdag 9 november 2006 19:52

Acties:

Verwijderd

Topicstarter

Hoi,

met onderstaande code laat ik een pop-up te voorschijn komen die linksbovenaan het scherm komt en bijna het hele scherm vult. Ik maak gebruik van JS, zodat ik de positie en de eigenschappen van het scherm kan instellen (geen toolbar enz.)

code:

function previews() { 
      var width = screen.availWidth - 10; 
      var height = screen.availHeight - 40; 
      window.open('popup.php', 'Preview', 'left=0,top=0,screenX=0,screenY=0,width='+width+',height='+height+',scrollbars=yes,toolbar=no,location=no,status=no,menubar=no,directories=no,resizable=yes'); 
  }

De code werkt op zich prima, maar de pop-up wordt geblokkeerd door de pop-up blokkering van bijvoorbeeld IE. Dit zou ik liever niet hebben aangezien niet alle gebruikers wellicht in de gaten hebben dat er geblokkeerd wordt en dus zullen denken dat de link waarop ze klinken niet werkt of dat er iets anders mis is.

Mijn vraag is nu of ik ook een pop-up kan laten verschijnen met dezelfde eigenschappen en grootte en positie maar zonder dat de pop-up geblokkeerd wordt. Ik zit zelf te denken aan een normale href met target=_blank en dan de eigenschappen instellen bij het openen van de nieuwe pagina via <body onLoad="init();">

Ik heb dit echter geprobeerd maar ik krijg de eigenschappen niet ingesteld, de volgende functie wordt wel uitgevoerd maar er gebeurt niks:

code:

function init() { 
  var width = screen.availWidth - 10; 
  var height = screen.availHeight - 40; 
  window.screenX = 0; 
  window.screenY = 0;   
  window.width = width; 
  window.height = height; 
}

ik kan de positie en grootte van het scherm dus niet ingesteld krijgen bij openen, ook al snap ik niet waarom het bovenstaande niet werkt. Verder zou ik al helemaal niet weten hoe ik de toolbar, statusbar enz. kan verbergen als de pagina al geladen wordt in het nieuwe scherm.

Iemand die een oplossing heeft?

donderdag 9 november 2006 19:54

Acties:

DizzyWeb

Ondertiteld

Gelukkig is hier niet zomaar een oplossing voor, anders zou elke popup wel zo gemaakt worden en waren popupblockers compleet nutteloos.

Je kan eventueel een div gebruiken, da's dan geen nieuw venster, maar een layer voor de pagina.

donderdag 9 november 2006 20:12

Acties:

storeman

jep, ik ben het met DizzyWeb eens, je kunt een paar dingen doen, laat een gebruiker ergens op klikken, dan worden popups wel toegestaan. Een optie wordt dan een DIV, waar je veel mee kunt.

Ik weet niet precies waar je de popup voor gebruikt maar er is ook zoiets als modal dialog.

"Chaos kan niet uit de hand lopen"

donderdag 9 november 2006 21:41

Acties:

orf

Heb ooit wel eens een beginnetje gemaakt voor een vervanger van window.open.
Het is een eerste opzetje, maar wellicht kun je er iets mee:

JavaScript:

window.open = function(uri, id, options){

    if (options && options.indexOf(',') > 0){
        var aOptions = options.toLowerCase().split(',');
        var i = aOptions.length;
        while(i--){
            if (aOptions[i].indexOf('=') > 0){
                var aArgs = aOptions[i].split('=');
                var sKey = aArgs[0].trim();
                var sVal = aArgs[1].trim();
                switch(aArgs[0]){
                    case 'width':       var iWidth      = aArgs[1];                     break;
                    case 'height':      var iHeight     = aArgs[1];                     break;
                    case 'left':        var iLeft       = aArgs[1];                     break;
                    case 'top':         var iTop        = aArgs[1];                     break;
                    case 'toolbar':     var bToolbar    = (aArgs[1] == 'yes')  break;
                    case 'location':    var bLocation   = (aArgs[1] == 'yes')   break;                      
                }
            }
        }
    }
    var oDiv = document.createElement('div');
    oDiv.style.cssText = 'overflow:hidden;background:#ccc;position:absolute;top:' + (iTop || 0) + 'px;left:' + (iLeft || 0) + 'px;width:' + (iWidth || 400) + 'px;';
    oDiv.id = id;
    
    var oTitle = document.createElement('div');
    oTitle.style.cssText = 'padding:3px 0;height:18px;background:#ddd;border:1px solid#eee;overflow:hidden;width:100%';
    oTitle.innerHTML = uri;
    oButton = document.createElement('input');
    oButton.type = 'button';
    oButton.value = 'x';
    oButton.onclick = function(){
        this.parentNode.parentNode.removeChild(this.parentNode);
    }
    oButton.style.cssText = 'position:absolute;top:0;right:0;';
    oDiv.appendChild(oButton);
    oDiv.appendChild(oTitle);
    var oFrame = document.createElement('iframe');
    oFrame.src = uri;
    
    if (bLocation){
        var oLocation = document.createElement('input');
        oLocation.type = 'text';
        oLocation.value = uri;
        oLocation.style.width = '100%';
        oLocation.self = this;
        oLocation.onchange = function(){
            this.self.oFrame.src = this.value;
        }
        oDiv.appendChild(oLocation);
    }
    oFrame.style.cssText = 'width:100%;height:' + (iHeight || 300) + 'px;border:0;margin:1px;';
    oDiv.appendChild(oFrame); 
    document.body.appendChild(oDiv);
        
                    
}

String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ""); };

edit: hieronder: nee

donderdag 9 november 2006 22:40

Acties:

t-x-m

.NET Nerd

Wordt niet de functie geblokkeerd ipv het uiteindelijke venster?

GC.Collect();

donderdag 9 november 2006 22:42

Acties:

StevenK

Je kunt toch een div gebruiken als popup ?

Was advocaat maar vindt het juridische nog steeds leuk

donderdag 16 november 2006 20:34

Acties:

Verwijderd

Topicstarter

bedankt voor de reacties, een div en een modal dialog zijn niet echt toereiken voor mijn doeleinden. Tenminste ik vind een layer over mijn bestaande pagina heen niet mooi genoeg worden, heb er even mee geexperimenteerd. Ik gebruik het weleens voor kleinere popups dus ik weet hoe het werkt.

Wat ik wil is een grote afbeelding tonen in een nieuw scherm. Dit zal met modal dialog toch niet kunnen voor zover ik weet.

Het liefst heb ik de afbeelding in een gemaximaliseerd browser window zo groot mogelijk in beeld. Vandaar dat ik het gewoon openen van een gewoon browser scherm niet een geweldige oplossing vind, omdat dit niet standaard gemaximaliseerd wordt geopend (in IE tenminste).

Nu ik er zo over nadenk is een iets kleinere afbeelding die past in een browserscherm met werkbalken misschien ook wel groot genoeg, maar dan wel in een gemaximaliseerd browser scherm. Is er dus een goede manier om bij het openen van het browser scherm het window uit te vergroten zodat het precies in beeld past (wat je normaal simpelweg doet door als gebruiker op maximaliseren te klikken)? In mijn eerste post heb ik de functie weergegeven waar ik dit mee dacht te kunnen maar die werkt bij mij niet...

Als dit echt niet mogelijk is dan moet ik er misschien voor kiezen dat de gebruiker zelf het scherm moet maximaliseren, maar dit vind ik eigenlijk een slechte oplossing, het moet toch mogelijk zijn om dit automatisch te doen lijkt me?

vrijdag 17 november 2006 11:33

Acties:

orf

het moet toch mogelijk zijn om dit automatisch te doen lijkt me?

Waarom moet jouw venster gemaximaliseerd worden op mijn 30" widescreen?
Het maximaliseren van een scherm is mogelijk met JavaScript, je wilt het alleen niet doen omdat een bezoeker het irritant vind (net zoals automatisch een popup openen).

vrijdag 17 november 2006 12:08

Acties:

killercow

eth0

orf schreef op vrijdag 17 november 2006 @ 11:33:
[...]

Waarom moet jouw venster gemaximaliseerd worden op mijn 30" widescreen?
Het maximaliseren van een scherm is mogelijk met JavaScript, je wilt het alleen niet doen omdat een bezoeker het irritant vind (net zoals automatisch een popup openen).

Agrees, blijf met je code van m'n windows af.
Ik bepaal wat er met een window gebeurt, je mag hem hoogstens een minimale afmeting geven zodat de content in de breedte er netjes in past.

Gelukkig kun je in firefox het aanpassen van schermafmetingen positie door javascript simpel uitzetten, maar dat geld niet voor IE gebruikers volgens mij.

[ Voor 12% gewijzigd door killercow op 17-11-2006 12:09 ]

openkat.nl al gezien?

zaterdag 18 november 2006 00:27

Acties:

Olaf van der Spek

Verwijderd schreef op donderdag 16 november 2006 @ 20:34:
Het liefst heb ik de afbeelding in een gemaximaliseerd browser window zo groot mogelijk in beeld. Vandaar dat ik het gewoon openen van een gewoon browser scherm niet een geweldige oplossing vind, omdat dit niet standaard gemaximaliseerd wordt geopend (in IE tenminste).

Gebruik dan ook een fatsoenlijke browser, met tabs. Waarom moet die afbeelding eigenlijk in een nieuw window in plaats van in het huidige window?

[ Voor 9% gewijzigd door Olaf van der Spek op 18-11-2006 00:28 ]

zaterdag 18 november 2006 01:13

Acties:

Verwijderd

Olaf van der Spek schreef op zaterdag 18 november 2006 @ 00:27:
[...]

Gebruik dan ook een fatsoenlijke browser, met tabs. Waarom moet die afbeelding eigenlijk in een nieuw window in plaats van in het huidige window?

Er zijn genoeg redenen te verzinnen om wel/geen nieuw venster te gebruiken, maar dat is nu even niet de vraag

Wat ik zou doen is het volgende:

code:

1	<a href="http://example.com/example.jpg" onclick="window.open('http://example.com/example.jpg', etc...); return false;">[Thumbnail/tekst]</a>

Bij een onclick event wordt normaal gesproken de popup blocker van een browser niet geactiveerd, omdat de gebruiker hier zelf een actie voor heeft gemaakt. Mocht de gebruiker nou geen javascript aan hebben staan, dan krijgt hij alsnog het plaatje te zien in het huidige venster

zondag 19 november 2006 17:51

Acties:

Verwijderd

Topicstarter

ah ok, inderdaad beter denk ik om niet automatisch te maximaliseren, had ik kennelijk nog niet goed over nagedacht. Ik geef het scherm nu inderdaad de minimale grootte die nodig is, dat werkt goed.

Bij een onclick event wordt normaal gesproken de popup blocker van een browser niet geactiveerd, omdat de gebruiker hier zelf een actie voor heeft gemaakt. Mocht de gebruiker nou geen javascript aan hebben staan, dan krijgt hij alsnog het plaatje te zien in het huidige venster

Dit werkt inderdaad prima, bedankt voor deze doeltreffende oplossing!