Javascript 下载时打开和关闭新标签页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13695537/
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
Opening and closing a new tab when downloading
提问by skittleys
On many websites (Dropboxbeing a good example), when you click on a document to download it, it opens a new window/tab, then the download prompt appears, and the tab/window immediately closes itself (while the prompt remains open).
在许多网站上（Dropbox就是一个很好的例子），当你点击一个文档下载它时，它会打开一个新窗口/标签，然后出现下载提示，标签/窗口立即关闭（同时提示保持打开状态） .
How do I replicate this behavior using javascript?
如何使用 javascript 复制此行为？
I think one approach would be to detect the appearance of that download prompt, then use window.close(). However, I'm not sure how to detect that particular prompt.
我认为一种方法是检测该下载提示的外观，然后使用window.close(). 但是，我不确定如何检测该特定提示。
A cross-browser solution is preferred, but anything that'll work in Firefox is greatly appreciated.
首选跨浏览器解决方案，但非常感谢可以在 Firefox 中使用的任何解决方案。
Clarifications
澄清
- I'm doing this in a Greasemonkey script
- The "link" that opens in the new tab is not necessarily a direct link to the document. Sometimes it is a simple page that starts the download in the background. I'm referring to the type of sites that have their special "download" page...the ones that say something like "your download will begin shortly, if it doesn't start, please click here".
- 我在 Greasemonkey 脚本中执行此操作
- 在新选项卡中打开的“链接”不一定是指向文档的直接链接。有时它是一个在后台开始下载的简单页面。我指的是具有特殊“下载”页面的网站类型……那些说“您的下载很快就会开始，如果没有开始，请单击此处”之类的网站。
More clarification: With regards to the type of website mentioned in clarification 2 above, what I want to do is click on the download link, have that particular download page load in a new window, and have the window close once the download has been initiated.
更多说明：关于上面说明 2 中提到的网站类型，我想要做的是单击下载链接，在新窗口中加载该特定下载页面，并在启动下载后关闭窗口.
回答by Brock Adams
There are three basic parts to what you want:
你想要的东西分为三个基本部分：
- You must Intercept the download links.
- You must send the link to a new tab when it is clicked, and not just modify it with
target="_blank". The tab must be opened with javascript, so that javascript will be allowed to close it when the time comes. - Your script must also run-on / handle the "popup" tab, so that it can detect when to close the popup.
- 您必须拦截下载链接。
- 单击链接时，您必须将链接发送到新选项卡，而不仅仅是使用
target="_blank". 该选项卡必须使用 javascript 打开，以便在时机成熟时允许 javascript 关闭它。 - 您的脚本还必须运行/处理“弹出”选项卡，以便它可以检测何时关闭弹出窗口。
For this discussion, refer to this test page at jsFiddle.It is structured like this:
有关此讨论，请参阅jsFiddle上的此测试页面。它的结构如下：
<div id="downloadLinks">
<ul>
<li><a class="dwnPageLink" href="http://fiddle.jshell.net/cDTKj/show/">
Test file, download page at jsFiddle
</a>
</li>
<li><a class="dwnPageLink" href="http://dw.com.com/redir...">
TextPad (a great text editor), download page at CNET / Download
</a>
</li>
</ul>
</div>
where the a.dwnPageLinklinks each open a "Download page" -- which automatically starts a file download after a short delay.
其中，a.dwnPageLink链接各开一个“下载页” -自动启动一个短暂的延迟后文件下载。
Intercept the download links (a.dwnPageLink):
截取下载链接（a.dwnPageLink）：
We intercept the links like so:
我们像这样拦截链接：
$("#downloadLinks a.dwnPageLink").each (interceptLink);
function interceptLink (index, node) {
var jNode = $(node);
jNode.click (openInNewTab);
jNode.addClass ("intercepted");
}
Note that we also add a CSS class, so that we may quickly see which links have been affected.openInNewTabwill be detailed below. It must both open a tab, and it must stop the normal link action.
请注意，我们还添加了一个 CSS 类，以便我们可以快速查看哪些链接受到了影响。openInNewTab下面会详细介绍。它必须同时打开一个选项卡，并且必须停止正常的链接操作。
Send the link to a new tab:
将链接发送到新标签：
We must use window.open()to handle the link. If the page is not opened via window.open, our script will not be able to close it.
我们必须使用window.open()来处理链接。如果页面不是通过 来打开的window.open，我们的脚本将无法关闭它。
Note that GM_openInTab()cannot be used because it does not cause window.openerto be set properly and otherwise does not provide a mechanism to close the opened tab.
请注意，GM_openInTab()不能使用它，因为它不会导致window.opener正确设置，否则不会提供关闭打开的选项卡的机制。
The new tab is launched in openInNewTab, which looks like this:
新选项卡在 中启动openInNewTab，如下所示：
function openInNewTab (zEvent) {
//-- Optionally adjust the href here, if needed.
var targURL = this.href;
var newTab = window.open (targURL, "_blank");
//--- Stop the link from doing anything else.
zEvent.preventDefault ();
zEvent.stopPropagation ();
return false;
}
Handle the "popup" tab:
处理“弹出”选项卡：
It is not possible to monitor for the File dialog from the launching page. So we must set the script to also run on the "popup" tab. Add @includedirectives accordingly.
无法从启动页面监视文件对话框。因此，我们必须将脚本设置为也在“弹出”选项卡上运行。相应地添加@include指令。
The popup portion of our script can detect the File dialog by monitoring the beforeunloadevent. Browsers will fire the beforeunloadevent, just before opening the File dialog (and also just before the tab closes, but we can ignore that).
我们脚本的弹出部分可以通过监视beforeunload事件来检测文件对话框。浏览器将beforeunload在打开文件对话框之前触发该事件（也在选项卡关闭之前，但我们可以忽略它）。
However, we cannot just close the tab when the dialog appears. Doing so will close the dialog too. So we add a small time delay, and a "Confirm" dialog so that the tab will stay open until the File dialog is closed. To clear the Confirm dialog, just hit Enteran extra time (or Click OK).
但是，我们不能在对话框出现时就关闭选项卡。这样做也会关闭对话框。因此，我们添加了一个小的时间延迟和一个“确认”对话框，以便该选项卡将保持打开状态，直到“文件”对话框关闭。要清除 Confirm 对话框，只需点击Enter额外的时间（或单击OK）。
The code looks like this:
代码如下所示：
$(window).bind ("beforeunload", function (zEvent) {
//-- Allow time for the file dialog to actually open.
setTimeout ( function () {
/*-- Since the time it takes for the user to respond
to the File dialog can vary radically, use a confirm
to keep the File dialog open long enough for the user
to act.
*/
var doClose = confirm ("Close this window?");
if (doClose) {
window.close ();
}
},
444 // 0.444 seconds
);
} );
Note:
笔记：
- Since the script will be running on both "List" pages and "Download" pages, we can tell which is which by checking
window.opener. On a page opened by javascript, this will have a non-null value. - This question did not ask about having the tab load in the background. That can be done, with varying degrees of success, but is a more involved. Ask a new question for that.
- 由于脚本将同时在“列表”页面和“下载”页面上运行，我们可以通过检查
window.opener. 在由 javascript 打开的页面上，这将具有非空值。 - 这个问题没有询问在后台加载选项卡。这可以做到，并取得不同程度的成功，但涉及更多。为此提出一个新问题。
Complete script:
完整脚本：
This script works on the test pageand on CNET / Download pages:
// ==UserScript==
// @name _Download page, auto closer
// @namespace _pc
// ******** Includes for "List pages" that have the links we might click...
// @include http://YOUR_SERVER.COM/YOUR_LIST-PAGE_PATH/*
// @include http://jsbin.com/ozofom/*
// @include http://fiddle.jshell.net/qy3NP/*
// @include http://download.cnet.com/*
// ******** Includes for "Popup pages" that do the actual downloads...
// @include http://YOUR_SERVER.COM/YOUR_POPUP-PAGE_PATH/*
// @include http://fiddle.jshell.net/cDTKj/*
// @include http://dw.com.com/redir?*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant GM_addStyle
// @grant GM_openInTab
// ==/UserScript==
/*- Important: The @include or @match directives must for for both the pages
that list the download links, AND the pages that do the actual downloading.
The @grant directive is needed to work around a design change
introduced in GM 1.0. It restores the sandbox.
*/
var bPageNotOpenedByJavascript = window.opener ? false : true;
if (bPageNotOpenedByJavascript) {
/***** "Normal" page, which might contain links to special download pages.
*/
//--- Intercept links to the download pages:
// For our jsFiddle Test page:
$("#downloadLinks a.dwnPageLink").each (interceptLink);
// For CNET/Download:
$("#downloadLinks div.dlLinkWrapper a").each (interceptLink);
GM_addStyle ( " \
a.intercepted { \
background: lime; \
} \
" );
}
else {
/***** Page opened by JS in either a popup or new tab.
This was *most likely* done by us, using window.open.
*/
$(window).bind ("beforeunload", function (zEvent) {
//-- Allow time for the file dialog to actually open.
setTimeout ( function () {
/*-- Since the time it takes for the user to respond
to the File dialog can vary radically, use a confirm
to keep the File dialog open long enough for the user
to act.
*/
var doClose = confirm ("Close this window?");
if (doClose) {
window.close ();
}
},
444 // 0.444 seconds
);
} );
}
function interceptLink (index, node) {
var jNode = $(node);
jNode.click (openInNewTab);
jNode.addClass ("intercepted");
}
function openInNewTab (zEvent) {
//-- Optionally adjust the href here, if needed.
var targURL = this.href;
var newTab = window.open (targURL, "_blank");
//--- Stop the link from doing anything else.
zEvent.preventDefault ();
zEvent.stopPropagation ();
return false;
}
回答by Muthu Kumaran
You can simply do using <a>tag by setting target="_blank"
您可以<a>通过设置简单地使用标签target="_blank"
<a href="http://jqueryui.com/resources/download/jquery-ui-1.9.2.custom.zip" target="_blank">Download</a>?
Demo: http://jsfiddle.net/g5Gn5/
演示：http: //jsfiddle.net/g5Gn5/
It will open a new window/tab and close automatically once file dialog appears.
它将打开一个新窗口/选项卡并在文件对话框出现后自动关闭。
回答by APB
just use this simple solution :
只需使用这个简单的解决方案：
<a href="linkToDownloadFile.html" onclick="download('linkToDownloadFile.html'); return false;">
<script>
function download(link){
var popout = window.open(link);
window.setTimeout(function(){
popout.close();
}, 2000);
}
</script>
