SQLの窓

2014年11月04日


JavaScript : 通常の WEB ページにブックマークレットでアプリケーション用の IFRAME を埋め込むコード (2) / ページ表示部中央に固定

▼ 本文中のブックマークレット(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 : ブックマークレットをページ表示部中央に固定



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

Microsoft Office
container 終わり

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

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