▼ 本文中のブックマークレット(URLからリンクを作成)の登録用リンク埋め込みアプリ用 IFRAME
前回は、IFRAME を埋め込んだだけでしたが、今回はIFRAME の中に、HTML を書き込みます。 但し、ブックマークレットで書ける量には限界があるので、SCRIPT 要素と他の若干の処理のみ書きこんで、内部の処理や画面は SCRIPT 要素のsrc 属性で呼び出される.js ファイル内で実行させます。 この方法のメリットは、IFRAME 内で独立した CSS や 変数が使える事と、IFRAME 内から元のページにアクセス可能であるということです。この方法を使えば、ドメイン間のセキュリティの問題は発生しません。 ( src に別ドメインを使うとセキュリティの制限でアクセスはできません ) 例えば以下のような HTMLとJavaScript を IFRAME の中に埋め込みたい場合、少し特殊な処理が必要になります
<meta charset="utf-8">
<style>
body{
background-color:#ccc;
}
textarea {
width:300px;
height:70px;
}
</style>
<input type="button" value="ダウンロードリンク作成" onclick="build_link();">
<br>
<textarea id="url"></textarea>
<br>
<a id="link" href="#"></a>
<script>
function build_link() {
document.getElementById("link").innerText = "ダウンロードリンク";
document.getElementById("link").href= document.getElementById("url").value;
}
</script>
JavaScript 内で画面を作成するには、HTML そのものを文字列として作成して document.write する必要があります。( こちらの javascript ボタンで作成できます ) HTML 部分を文字列化した JavaScript ソースコード(UTF-8)
str="";
str+="<meta charset=\"utf-8\"> \n";
str+="<style> \n";
str+="body{ \n";
str+=" background-color:#ccc; \n";
str+="} \n";
str+="textarea { \n";
str+=" width:300px; \n";
str+=" height:70px; \n";
str+="} \n";
str+="</style> \n";
str+="<input type=\"button\" value=\"ダウンロードリンク作成\" onclick=\"build_link();\"> \n";
str+="<br> \n";
str+="<textarea id=\"url\"></textarea> \n";
str+="<br> \n";
str+="<a id=\"link\" href=\"#\"> </a> \n";
document.write(str);
document.close();
function build_link() {
document.getElementById("link").firstChild.nodeValue = "ダウンロードリンク";
document.getElementById("link").href= document.getElementById("url").value;
}
このコードをWEBに保存して、以下のようにスクリフプトタグごと IFRAME 内に document.write する事によって、一般のページに対する処理を行う画面として IFRAME を埋め込む事ができます。 ※ もちろん、サイト側で この手のブックマークレットをブロックする事は可能です
<a href="javascript:if(!window['_bI']){window._bI={};(function(w,h,b,l,t,z,v){var%20wnd=document.createElement('iframe');with(wnd){frameBorder=b;width=w;height=h;with(style){position='fixed';left=l;top=t;zIndex=z;display=v;marginLeft=(((w/2)*-1)+'px');marginTop=(((h/2)*-1)+'px');borderRadius='8px';}}document.body.appendChild(wnd);window._bI.wnd=wnd;wnd.contentWindow.document.write('<'+'script%20src='http://toolbox.winofsql.jp/build_link.js'%20charset='utf-8'></'+'script>%20');})(400,200,1,'50%','50%',1000,'');}" onclick="
alert('ブックマークバーにドロップか、IEでは右クリックでお気に入りに登録(お気に入りバー)が簡単です');
if (window.navigator.appName.toLowerCase().indexOf('microsoft') > -1) {
event.returnValue = false;
}
event.preventDefault();
event.stopPropagation();
">埋め込みアプリ用 IFRAME</a>
このブックマークレットは、URL を手早くリンク化して右クリックしてそのファイルをダウンロードする為に使用できます 関連する記事 JavaScript : 通常の WEB ページにブックマークレットでアプリケーション用の IFRAME を埋め込むコード(1) 親(parent) フレームに jQuery が無い場合に jQuery をインストールする。 更新履歴 2011-03-20 : 初回投稿 2013-11-03 : ソースコードを単純に書き換えて、解説を追加。 2014-11-04 : ブックマークレットをページ表示部中央に固定
|
|
【ブックマークレットの最新記事】
- 階層を指定して Googleのドメイン内検索を実行
- Seesaa ブログの『カテゴリ』をソートするブックマークレット
- Google Chrome でイラストAC のタグをコピー可能にするブックマークレット
- 選択した文字列を Google 翻訳で翻訳するブックマークレット( 選択が無い場合はページごと翻訳 ) / 3年半でだいぶ結果が変わってます
- ドメイン内 Google 検索 : 表示しているサイトで Google 検索を実行するブックマークレット
- jQuery でページを 50% に縮小するブックマークレット(2回目の実行は80%)
- Seesaa ブログの通常エディタで記事の先頭に Twitter カード用の meta 要素を挿入するブックマークレット
- jQuery でページを 斜めにして影を付けて 紹介画像として使うブックマークレット
- ブックマークレット : Googleのドメイン内検索を任意のページで実行
- JavaScript : ページのリンクのターゲットを全て name_window という名前に変更して、リンクを開く先を全て同じウィンドウにしてしまうブックマークレット
- ブラウザ上で選択した文字列で Google 検索するブックマークレット
- JavaScript : ブックマークレット雛型を使ったサンプル( そのページを１回転させる )
- ページを逆立ちさせるブックマークレット
- アドレスバーに表示した URL を、ダウンロードできるリンクを作成するブックマークレット( 動画等、そのままではダウンロードできない場合にとても有効です )
- Firefox 専用ブックマークレット : フォーカス位置のSELECT要素の選択されたテキストの取得
- JavaScript : ブックマークレットに必要な戻り値を戻さない処理の実装方法
