SQLの窓

2014年03月06日


アドレスバーに表示した URL を、ダウンロードできるリンクを作成するブックマークレット( 動画等、そのままではダウンロードできない場合にとても有効です )



リンクビルダー

▼ 表示しているページに以下のような IFRAME を埋め込みます


実行すると、現在表示している URL を使って、まずダウンロード用の単純なリンクを作成します( このリンクは右クリックから使うように、通常のクリックではメッセージが表示されて、使用できません )

それ以外に、HTML として以下のようなリンクを作成します。
1) 普通のリンク 
2) 新しくウインドウを開くリンク
3) 画像として
4) IFRAME の内容
5) javascript として
6) css として
一度開いた後も、他の URL を上にテキストエリアに貼り付けて再度作成もできます。 ブックマークレット内では、こちらでホスティングしている js ファイルを使用しており、その内容は以下のようになります
str="";
str+="<meta charset=\"utf-8\"> \n";
str+="<style> \n";
str+="* { \n";
str+="	font-size:14px; \n";
str+="	font-family: Arial, Helvetica, Verdana, \"ヒラギノ角ゴPro W3\", \"Hiragino Kaku Gothic Pro\", Osaka, \"メイリオ\", Meiryo, \"MS Pゴシック\", sans-serif; \n";
str+="} \n";
str+="body{ \n";
str+="	background-color:#ccc; \n";
str+="	padding-left: 11px; \n";
str+="} \n";
str+="</style> \n";
str+="<input type=\"button\" value=\"ダウンロードリンク作成\" onclick=\"build_link();\"> \n";
str+=" <input type=\"button\" value=\"アドレスバー取得\" onclick=\"get_link();\"> \n";
str+="<br> \n";
str+="<textarea id=\"url\" style='width:360px;height:70px;' onclick='this.select();'></textarea> \n";
str+="<div style='height:40px;padding:3px;'> \n";
str+="<a id=\"link\" href=\"#\" onclick=\"";
str+="		alert('右クリックからダウンロードして下さい'); \n";
str+="		if (window.navigator.appName.toLowerCase().indexOf('microsoft') > -1) { \n";
str+="			event.returnValue = false; \n";
str+="		} \n";
str+="		event.preventDefault(); \n";
str+="		event.stopPropagation(); \n";
str+="	\"> </a> </div>\n";
str+="<textarea id=\"data\" style='width:360px;height:410px;'></textarea> \n";
str+="<br><a href=\"http://toolbox.winofsql.jp/tool_html_links.htm\" target=\"_blank\" style='color:navy'>HTMLまたはJSのテストページ</a> \n";
str+="<"+"script type=\"text/javascript\"> \n";
str+="get_link(); \n";
str+="build_link(); \n";
str+="</"+"script> ";
document.write(str);
document.close();
function get_link() {
	document.getElementById("url").value = parent.document.URL;
}
function build_link() {
	if ( document.getElementById("url").value == "" ) {
		alert("URL を入力して下さい");
		document.getElementById("url").focus();
		return;
	}

	var url = document.getElementById("url").value;

	document.getElementById("link").firstChild.nodeValue = "ダウンロードリンク";
	document.getElementById("link").href= url;

	var target = "";

	target+="<a href=\""+ url + "\">リンク</a>\n";
	target+="\n";
	target+="<a href=\""+ url + "\" target=\"_blank\">新しいウインドウリンク</a>\n";
	target+="\n";
	target+="<img src=\""+ url + "\" style=\"border: solid 0px #000000;\">\n";
	target+="\n";
	target+="<iframe src=\"" + url + "\" name=\"myframe\" frameborder=\"1\" scrolling=\"yes\" width=\"600\" height=\"400\"></iframe>\n";
	target+="\n";
	target+="<"+"script type=\"text/javascript\" src=\""+ url + "\"></"+"script> \n";
	target+="\n";
	target+="<link rel=\"stylesheet\" href=\""+ url + "\" type=\"text/css\"> ";
	target+="\n";

	document.getElementById("data").value = target;
}

このコードを、IFRAME 内にダイレクトに書き込んで、画面と処理を作成しています。JavaScript で画面を作成する場合、document.write しか選択肢は無く(DOMで作成するとブラウザの違いを考慮する必要があり、細かい調整も複雑になります)、そのような文字列を手作業で作成するのは大変なので、こちらのツールを使用しています。

▼ HTML や JavaScript のコードを文字列に変換します



【ブックマークレットの最新記事】
posted by lightbox at 2014-03-06 12:57 | ブックマークレット | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり