fenêtre ouverte onclick et taille spécifique

88

J'ai un lien comme celui-ci:

<a href="/index2.php?option=com_jumi&amp;fileid=3&amp;Itemid=11" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,')

Je veux que la nouvelle fenêtre d'ouverture s'ouvre dans une taille spécifique. Comment spécifier la hauteur et la largeur?

Alex Gordon
la source

Réponses:

177
<a href="/index2.php?option=com_jumi&amp;fileid=3&amp;Itemid=11"
   onclick="window.open(this.href,'targetWindow',
                                   `toolbar=no,
                                    location=no,
                                    status=no,
                                    menubar=no,
                                    scrollbars=yes,
                                    resizable=yes,
                                    width=SomeSize,
                                    height=SomeSize`);
 return false;">Popup link</a>

Où la largeur et la hauteur sont des pixels sans unités (largeur = 400 et non largeur = 400 px).

Dans la plupart des navigateurs, cela ne fonctionnera pas s'il n'est pas écrit sans saut de ligne, une fois que les variables sont configurées, tout est sur une seule ligne:

<a href="/index2.php?option=com_jumi&amp;fileid=3&amp;Itemid=11" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=SomeSize,height=SomeSize'); return false;">Popup link</a> 
Larry Hipp
la source
14
Vous voudrez également remplacer le dernier caractère ")" par "); return false;" pour empêcher l'ouverture du lien d'origine en plus du popup.
Andrew
2
Un ancien mais j'ai trouvé cela via la recherche, donc réponse corrigée selon la réponse de @AndrewSpear
neil
1
@Larry Hipp comment puis-je le modifier pour l'adapter à la taille de l'écran?
Idham Choudry
@IdhamChoudry Supprimez simplement les propriétés largeur / hauteur et cela prendra automatiquement tout l'espace disponible. Je pense que le réglage width=100vw, height=100vhfonctionnerait aussi.
Vadorequest
1
Pour moi, cela fonctionne, mais UNE CHOSE IMPORTANTE - vous ne devez pas utiliser de sauts de ligne dans le corps de votre fonction, comme dans l'exemple ci-dessus. J'ai supprimé les sauts de ligne et cela a fonctionné pour moi.
Eugene
20
window.open('http://somelocation.com','mywin','width=500,height=500');
TGuimond
la source
12

Ajoutez-les simplement à la chaîne de paramètres.

window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=350,height=250')
Joël
la source
11
<a style="cursor:pointer"
  onclick=" window.open('http://YOUR.URL.TARGET','',' scrollbars=yes,menubar=no,width=500, resizable=yes,toolbar=no,location=no,status=no')">Your text</a>
aptx.wap.sh
la source
Bien que je demande, qu'est-ce que cela ajoute à toutes les réponses déjà données?
EWit
3

Voici les meilleures pratiques de la page window.open de Mozilla Developer Network :

<script type="text/javascript">
var windowObjectReference = null; // global variable

function openFFPromotionPopup() {
  if(windowObjectReference == null || windowObjectReference.closed)
  /* if the pointer to the window object in memory does not exist
     or if such pointer exists but the window was closed */

  {
    windowObjectReference = window.open("http://www.spreadfirefox.com/",
   "PromoteFirefoxWindowName", "resizable,scrollbars,status");
    /* then create it. The new window will be created and
       will be brought on top of any other window. */
  }
  else
  {
    windowObjectReference.focus();
    /* else the window reference must exist and the window
       is not closed; therefore, we can bring it back on top of any other
       window with the focus() method. There would be no need to re-create
       the window or to reload the referenced resource. */
  };
}
</script>

<p><a
 href="http://www.spreadfirefox.com/"
 target="PromoteFirefoxWindowName"
 onclick="openFFPromotionPopup(); return false;" 
 title="This link will create a new window or will re-use an already opened one"
>Promote Firefox adoption</a></p>
Nicolas Renon
la source
0

Tous ceux qui recherchent un composant de fichier Vue rapide, vous y allez:

// WindowUrl.vue

<template>
    <a :href="url" :class="classes" @click="open">
        <slot></slot>
    </a>
</template>

<script>
    export default {
        props: {
            url: String,
            width: String,
            height: String,
            classes: String,
        },
        methods: {
            open(e) {
                // Prevent the link from opening on the parent page.
                e.preventDefault();

                window.open(
                    this.url,
                    'targetWindow',
                    `toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=${this.width},height=${this.height}`
                );
            }
        }
    }
</script>

Usage:

<window-url url="/print/shipping" class="btn btn-primary" height="250" width="250">
    Print Shipping Label
</window-url>
Steve Bauman
la source