nhấp chuột mở cửa sổ và kích thước cụ thể


87

Tôi có một liên kết như thế này:

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

Tôi muốn cửa sổ mở mới mở ở một kích thước cụ thể. Làm cách nào để chỉ định chiều cao và chiều rộng?

Câu trả lời:


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>

Trong đó chiều rộng và chiều cao là pixel không có đơn vị (chiều rộng = 400 không phải chiều rộng = 400px).

Trong hầu hết các trình duyệt, nó sẽ không hoạt động nếu nó không được viết mà không có ngắt dòng, khi các biến được thiết lập, mọi thứ đều nằm trong một dòng:

<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
Bạn cũng sẽ muốn hoán đổi ký tự ")" cuối cùng cho "); return false;" để ngăn liên kết ban đầu được mở ngoài cửa sổ bật lên.
Andrew

2
Một cái cũ nhưng tôi đã tìm thấy cái này qua tìm kiếm nên câu trả lời đã được sửa lại theo phản hồi từ @AndrewSpear
neil

1
@Larry Hipp làm cách nào để tôi có thể thay đổi nó cho vừa với kích thước của màn hình?
Idham Choudry

@IdhamChoudry Chỉ cần loại bỏ các thuộc tính chiều rộng / chiều cao và nó sẽ tự động lấy tất cả không gian có sẵn. Tôi tin rằng cài đặt width=100vw, height=100vhcũng sẽ hoạt động.
Vadorequest

1
Đối với tôi, nó hoạt động, nhưng MỘT ĐIỀU QUAN TRỌNG - bạn không nên sử dụng các dấu ngắt dòng trong phần nội dung của hàm, như trong ví dụ trên. Tôi đã loại bỏ ngắt dòng và nó phù hợp với tôi.
Eugene


20
window.open('http://somelocation.com','mywin','width=500,height=500');

12

Chỉ cần thêm chúng vào chuỗi tham số.

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>

Mặc dù tôi hỏi, điều này bổ sung thêm gì cho tất cả các câu trả lời đã cho?
EWit

3

Đây là những phương pháp hay nhất từ trang window.open của 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

Bất kỳ ai đang tìm kiếm một thành phần tệp Vue nhanh chóng, hãy truy cập vào đây:

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

Sử dụng:

<window-url url="/print/shipping" class="btn btn-primary" height="250" width="250">
    Print Shipping Label
</window-url>
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.