Javascript onclick 打开窗口和特定大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2157180/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onclick open window and specific size
提问by l--''''''---------''''''''''''
I have a link like this:
我有一个这样的链接：
<a href="/index2.php?option=com_jumi&fileid=3&Itemid=11" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,')
I want the new opening window to open in a specific size. How do I specify the height and width?
我希望新的打开窗口以特定大小打开。如何指定高度和宽度？
回答by Larry Hipp
<a href="/index2.php?option=com_jumi&fileid=3&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>
Where width and height are pixels without units (width=400 not width=400px).
其中宽度和高度是没有单位的像素（宽度=400 不是宽度=400px）。
In most browsers it will not work if it is not written without line breaks, once the variables are setup have everything in one line:
在大多数浏览器中，如果它不是在没有换行符的情况下编写的，它将无法工作，一旦设置了变量，所有内容都在一行中：
<a href="/index2.php?option=com_jumi&fileid=3&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>
回答by Adam Kiss
window.open ("http://www.javascript-coder.com",
"mywindow","menubar=1,resizable=1,width=350,height=250");
from
从
http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
http://www.javascript-coder.com/window-popup/javascript-window-open.phtml
:]
:]
回答by TGuimond
window.open('http://somelocation.com','mywin','width=500,height=500');
回答by Joel
Just add them to the parameter string.
只需将它们添加到参数字符串中即可。
window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=350,height=250')
回答by aptx.wap.sh
<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>
回答by Nicolas Renon
These are the best practices from Mozilla Developer Network's window.openpage :
这些是来自Mozilla Developer Network 的 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>
回答by Steve Bauman
Anyone looking for a quick Vue file component, here you go:
任何正在寻找快速 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>
Usage:
用法：
<window-url url="/print/shipping" class="btn btn-primary" height="250" width="250">
Print Shipping Label
</window-url>
