onclick เปิดหน้าต่างและขนาดเฉพาะ


90

ฉันมีลิงค์ดังนี้:

<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,')

ฉันต้องการให้หน้าต่างเปิดใหม่เปิดในขนาดที่กำหนด ฉันจะระบุความสูงและความกว้างได้อย่างไร?

คำตอบ:


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

โดยที่ความกว้างและความสูงคือพิกเซลที่ไม่มีหน่วย (width = 400 ไม่ใช่ width = 400px)

ในเบราว์เซอร์ส่วนใหญ่จะไม่ทำงานหากไม่ได้เขียนโดยไม่มีการแบ่งบรรทัดเมื่อตั้งค่าตัวแปรแล้วจะมีทุกอย่างในบรรทัดเดียว:

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

14
นอกจากนี้คุณยังต้องการสลับอักขระ ")" ตัวสุดท้ายสำหรับ "); return false;" เพื่อป้องกันไม่ให้ลิงก์เดิมถูกเปิดนอกเหนือจากป๊อปอัป
Andrew

2
อันเก่า แต่ฉันพบสิ่งนี้จากการค้นหาคำตอบที่ถูกต้องตามคำตอบจาก @AndrewSpear
neil

1
@Larry Hipp ฉันจะเปลี่ยนให้พอดีกับขนาดของหน้าจอได้อย่างไร?
Idham Choudry

@IdhamChoudry เพียงแค่ลบคุณสมบัติความกว้าง / ความสูงและจะใช้พื้นที่ว่างทั้งหมดโดยอัตโนมัติ ฉันเชื่อว่าการตั้งค่าwidth=100vw, height=100vhก็ใช้ได้เช่นกัน
Vadorequest

1
สำหรับฉันมันได้ผล แต่สิ่งที่สำคัญอย่างหนึ่ง - คุณไม่ควรใช้ตัวแบ่งบรรทัดในเนื้อหาของฟังก์ชันของคุณดังตัวอย่างด้านบน ฉันได้ลบตัวแบ่งบรรทัดแล้วและมันก็ใช้ได้สำหรับฉัน
Eugene



12

เพียงแค่เพิ่มเข้าไปในสตริงพารามิเตอร์

window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=350,height=250')

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>

แม้ว่าฉันจะถาม แต่สิ่งนี้เพิ่มอะไรให้กับคำตอบที่ได้รับไปแล้วทั้งหมด?
EWit

3

นี่คือแนวทางปฏิบัติที่ดีที่สุดจากหน้าwindow.open ของ 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>

0

ใครก็ตามที่กำลังมองหาคอมโพเนนต์ไฟล์ Vue อย่างรวดเร็วโปรดไปที่:

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

การใช้งาน:

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

0

การใช้ฟังก์ชันใน typescript

openWindow(){
    //you may choose to deduct some value from current screen size
    let height = window.screen.availHeight-100;
    let width = window.screen.availWidth-150;
    window.open("http://your_url",`width=${width},height=${height}`);
}
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.