多くのウェブサイト(Dropboxが良い例です)では、ドキュメントをクリックしてダウンロードすると、新しいウィンドウ/タブが開き、ダウンロードしますプロンプトが表示され、タブ/ウィンドウはすぐに閉じます(プロンプトは開いたままです)。
Javascriptを使用してこの動作を複製するにはどうすればよいですか?
1つのアプローチは、そのダウンロードプロンプトの外観を検出してから、window.close()
を使用することだと思います。ただし、その特定のプロンプトを検出する方法がわかりません。
クロスブラウザソリューションが推奨されますが、Firefoxで機能するものは何でも大歓迎です。
説明
詳細説明:上記の説明2で説明したウェブサイトの種類に関して、私がやりたいのは、ダウンロードリンクをクリックし、その特定のダウンロードページを新しいウィンドウにロードして、ウィンドウを表示することです。ダウンロードが開始されたら閉じます。
あなたが望むものには3つの基本的な部分があります:
target="_blank"
_で変更するだけでなく、クリックしたときに新しいタブにリンクを送信する必要があります。タブはjavascriptで開く必要があります。これにより、時が来たときにjavascriptでタブを閉じることができます。この議論については、参照 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>
_
ここで、_a.dwnPageLink
_リンクはそれぞれ「ダウンロードページ」を開きます。これは、少し遅れてファイルのダウンロードを自動的に開始します。
a.dwnPageLink
_):次のようにリンクをインターセプトします。
_$("#downloadLinks a.dwnPageLink").each (interceptLink);
function interceptLink (index, node) {
var jNode = $(node);
jNode.click (openInNewTab);
jNode.addClass ("intercepted");
}
_
影響を受けたリンクをすばやく確認できるように、CSSクラスも追加していることに注意してください。openInNewTab
の詳細を以下に示します。タブを開き、通常のリンクアクションを停止する必要があります。
リンクを処理するには、window.open()
を使用する必要があります。ページが_window.open
_で開かれていない場合、スクリプトはページを閉じることができません。
GM_openInTab()
は、_window.opener
_が正しく設定されないため、または開いているタブを閉じるメカニズムが提供されないため、使用できないことに注意してください。
新しいタブは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;
}
_
起動ページから[ファイル]ダイアログを監視することはできません。したがって、「ポップアップ」タブでも実行するようにスクリプトを設定する必要があります。それに応じて_@include
_ディレクティブを追加します。
スクリプトのポップアップ部分は、beforeunload
イベントを監視することで[ファイル]ダイアログを検出できます。ブラウザは、[ファイル]ダイアログを開く直前(およびタブが閉じる直前)にbeforeunload
イベントを発生させますが、これは無視できます。
ただし、ダイアログが表示されたときにタブを閉じることはできません。これを行うと、ダイアログも閉じます。そのため、少しの時間遅延と[確認]ダイアログを追加して、[ファイル]ダイアログが閉じるまでタブが開いたままになるようにします。確認ダイアログをクリアするには、 Enter 延長戦(またはクリック[〜#〜] ok [〜#〜])。
コードは次のようになります。
_$(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
);
} );
_
window.opener
_をチェックすることでどちらがどちらであるかを判断できます。 javascriptで開かれたページでは、これはnull以外の値になります。このスクリプトは テストページ および CNET /ダウンロードページ で機能します:
_// ==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;
}
_
<a>
を設定することにより、target="_blank"
タグを使用して簡単に行うことができます。
<a href="http://jqueryui.com/resources/download/jquery-ui-1.9.2.custom.Zip" target="_blank">Download</a>
デモ: http://jsfiddle.net/g5Gn5/
新しいウィンドウ/タブが開き、ファイルダイアログが表示されると自動的に閉じます。
この単純なソリューションを使用するだけです:
<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>