Javascript Onclick window.open Popup 在 Firefox 和 Safari 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17666412/
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
Javascript Onclick window.open Popup not working in Firefox and Safari
提问by clauenmexico
On my website(Password is "WS" without the quotes) I created a grid with a plugin (UberGrid).
在我的网站上（密码是没有引号的“WS”）我创建了一个带有插件（UberGrid）的网格。
To make each cell a popup I added the following code inside this Wordpress page:
为了使每个单元格成为一个弹出窗口，我在这个 Wordpress 页面中添加了以下代码：
<script type="text/javascript">
function popWin(url)
{
var thePopCode = window.open(url,'','height=800, width=1000, top=500, left=200, scrollable=yes, menubar=yes, resizable=yes');
if (window.focus)
{
thePopCode.focus();
}
}
</script>
Inside the plugin (inside the Debra Porter cell) I added the following link:
在插件内部（在 Debra Porter 单元内），我添加了以下链接：
javascript: onclick=popWin('http://www.weybridgestrategies.com/team/debra-porter-president-ceo'); return (false);
It works fine in Google Chrome but no results in Firefox or Safari.
它在 Google Chrome 中运行良好，但在 Firefox 或 Safari 中没有结果。
回答by metadings
Have a look on what HTML is produced:
看看生成的 HTML 是什么：
<a class="uber-grid-hover" href="onclick=popWin('http://www.weybridgestrategies.com/team/debra-porter-president-ceo'); return (false);" >
How it should look like:
它应该是什么样子：
<a class="uber-grid-hover" href="http://www.weybridgestrategies.com/team/debra-porter-president-ceo"
onclick="popWin('http://www.weybridgestrategies.com/team/debra-porter-president-ceo'); return false;">
So your popWin function is already ok, but you need to justify the anchor's attributes hrefand onclick. onclickis javaScript, so you don't need the javaScript prefix, and also you don't need inline onclick=because this creates a global variable. The return falsewill prevent the browser to follow the href, if javascript is available. By using this.hrefthis is will not do what you expect at least in IE, because this is in IE the event, not the anchor.
所以你的 popWin 函数已经可以了，但是你需要证明锚的属性href和onclick. onclick是 javaScript，因此您不需要 javaScript 前缀，也不需要内联，onclick=因为这会创建一个全局变量。return false如果javascript可用，这将阻止浏览器跟随href。通过使用this.hrefthis 至少在 IE 中不会做您期望的事情，因为这是在 IE 中的事件，而不是锚点。
EDIT: Actually your TestLink does what you intended, as of Firefox Aurora v24, without blocking-a-popup.
编辑：实际上，从 Firefox Aurora v24 开始，您的 TestLink 会按照您的意图执行操作，而不会阻止弹出窗口。
But I have to follow Brian's comment, that your new window may be considered a popup, so it would be the best if you do window.open(url, '_blank')or simply use <a target="_blank" href="...">- and looking for a javaScript "popup" that doesn't load a new page, but looks more HTML5ish, for example using jQuery UI or by trying your own jS (and that would be another answer to a much bigger question... ;))
但是我必须遵循 Brian 的评论，即您的新窗口可能被视为弹出窗口，因此如果您这样做window.open(url, '_blank')或只是使用它，那将是最好的<a target="_blank" href="...">- 并寻找一个不会加载新页面但看起来的 javaScript“弹出窗口”更多的 HTML5ish，例如使用 jQuery UI 或尝试自己的 jS（这将是对更大问题的另一个答案......;））
UPDATE: A good idea unleashing your jQuery already included, lets speak javaScript:
更新：释放你已经包含的 jQuery 的好主意，让我们谈谈 javaScript：
<script type="text/javascript">
function popWin(url)
{
var thePopCode = window.open(url,'','height=800, width=1000, top=500, left=200,scrollable=yes, menubar=yes, resizable=yes');
if (window.focus) {
thePopCode.focus();
}
}
jQuery(document).ready(function ($) {
// here is your HTML DOM ready
// create an onclick event for every a.uber-grid-hover
$("a.uber-grid-hover").click(function (event) {
event.preventDefault(); // this is "like" return false
// this get's the href from your anchor, using jQuery sugar
var url = $(this).attr("href");
// call your fun
popWin(url);
});
});
</script>
Using this script, you should no more need to create onclickattributes for every single anchor. Simply put that into your wordpress source, this shouldwork as is.
使用此脚本，您不再需要onclick为每个锚点创建属性。简单地把它放到你的 wordpress 源代码中，这应该可以正常工作。
Now simply make the <a>using class="uber-grid-hover", this is required so that jQuery can select the hovers easily, then you need the hrefand you may include also target="_blank"so that non-javascript users will also have the page in a new window.
现在只需<a>使用 using class="uber-grid-hover"，这是必需的，以便 jQuery 可以轻松选择悬停，然后您需要href并且您还可以包括，target="_blank"以便非javascript用户也将在新窗口中拥有该页面。
<a class="uber-grid-hover" target="_blank"
href="http://www.weybridgestrategies.com/team/debra-porter-president-ceo">
回答by Ahmed Ali
Try this code :
试试这个代码：
function popwin(url) {
window.open('', url, 'height=800, width=1000, top=500, left=200, scrollable=yes, menubar=yes, resizable=yes');
url.target =url;
}
And for link,use the same code
对于链接，使用相同的代码
javascript: onclick=popWin('http://www.weybridgestrategies.com/team/debra-porter-president-ceo'); return (false);
