リンクビルダー
▼ 表示しているページに以下のような 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, \"ＭＳ Ｐゴシック\", 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 のコードを文字列に変換します
|
|
【ブックマークレットの最新記事】
- Seesaa ブログの『カテゴリ』をソートするブックマークレット
- Google Chrome でイラストAC のタグをコピー可能にするブックマークレット
- 選択した文字列を Google 翻訳で翻訳するブックマークレット( 選択が無い場合はページごと翻訳 ) / 3年半でだいぶ結果が変わってます
- ドメイン内 Google 検索 : 表示しているサイトで Google 検索を実行するブックマークレット
- jQuery でページを 50% に縮小するブックマークレット(2回目の実行は80%)
- Seesaa ブログの通常エディタで記事の先頭に Twitter カード用の meta 要素を挿入するブックマークレット
- jQuery でページを 斜めにして影を付けて 紹介画像として使うブックマークレット
- ブックマークレット : Googleのドメイン内検索を任意のページで実行
- JavaScript : ページのリンクのターゲットを全て name_window という名前に変更して、リンクを開く先を全て同じウィンドウにしてしまうブックマークレット
- ブラウザ上で選択した文字列で Google 検索するブックマークレット
- JavaScript : ブックマークレット雛型を使ったサンプル( そのページを１回転させる )
- JavaScript : 通常の WEB ページにブックマークレットでアプリケーション用の IFRAME を埋め込むコード (2) / ページ表示部中央に固定
- ページを逆立ちさせるブックマークレット
- Firefox 専用ブックマークレット : フォーカス位置のSELECT要素の選択されたテキストの取得
- JavaScript : ブックマークレットに必要な戻り値を戻さない処理の実装方法
