onclick 打开窗口和特定大小答案

【问题标题】：onclick open window and specific sizeonclick 打开窗口和特定大小
【发布时间】：2011-01-10 13:27:06
【问题描述】：

我有一个这样的链接：

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

我希望新的打开窗口以特定大小打开。如何指定高度和宽度？

【问题讨论】：

标签： javascript html

【解决方案1】：

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

其中宽度和高度是没有单位的像素（宽度=400 而不是宽度=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>

【讨论】：

您还需要将最后一个 ")" 字符替换为 ");return false;"以防止在弹出窗口之外打开原始链接。
一个旧的，但我通过搜索找到了这个，所以根据@AndrewSpear 的回复更正了答案
@Larry Hipp 我怎样才能改变它以适应屏幕的大小？
@IdhamChoudry 只需删除宽度/高度属性，它将自动占用所有可用空间。我相信设置width=100vw, height=100vh 也可以。
对我来说它有效，但有一件重要的事情 - 你不应该在你的函数体中使用换行符，就像上面的例子一样。我已经删除了换行符，它对我有用。

【解决方案2】：

window.open ("http://www.javascript-coder.com",
"mywindow","menubar=1,resizable=1,width=350,height=250");

来自

http://www.javascript-coder.com/window-popup/javascript-window-open.phtml

:]

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

只需将它们添加到参数字符串中即可。

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

【讨论】：

【解决方案5】：

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

【讨论】：

虽然我确实问过，但这对所有已经给出的答案有什么好处？

【解决方案6】：

这些是来自Mozilla Developer Network's window.open 页面的最佳实践：

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

【讨论】：

【解决方案7】：

在打字稿中使用函数

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}`);
}

【讨论】：

【解决方案8】：

任何正在寻找快速 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>

【讨论】：