SQLの窓

2014年11月04日


JavaScript : 通常の WEB ページにブックマークレットでアプリケーション用の IFRAME を埋め込むコード(1)

▼ ブックマークレット登録用のリンク
IFRAME
※ Google Chrome は、ブックマークバーにドラッグ&ドロップ
※ Firefox は、ブックマークツールバーにドラッグ&ドロップ
※ IE は、右クリックでお気に入りバーへ登録

これだけでは、役には立ちませんが、次にこの IFRAME の中に画面(または処理のみ)を構築します

_bI は、ユニークであれはなんでもいいのですが、bindIframe を略しています。リロードしない限り、いったん作成した IFRAME を window._bI.wnd で参照する事ができます。

w : 幅
h : 高さ
b : ポーダー( 0:なし、1:あり )
l : 左表示開始位置
t : 上表示開始位置
z : zIndex
v : 表示する : ""、表示しない : "none"
<script>
if (!window['_bI']) {
	window._bI = {};
	(function(w, h, b, l, t, z, v) {
		var wnd = document.createElement('iframe');
		with (wnd){
			frameBorder = b;
			width = w;
			height = h;
			with (style){
				position = 'absolute';
				left = l;
				top = t;
				zIndex = z;
				display = v
			}
		}
		document.body.appendChild(wnd);
		window._bI.wnd = wnd;
		wnd.contentWindow.document.write('<style>body{background-color:#ccc;}</style> ');
		wnd.contentWindow.document.close();
	})(400, 200, 1, '0px', '0px', 1000, '');
}
</script>

ブックマークレット登録用のコードは以下のようになります

※ 変数定義と空白出力にのみ、%20 を使いますが、それ以外のスペースは全て取り除いています
※ ブックマークレットは、A 要素 の中で記述するので、< と > は、&lt; と &gt; に変更します。
<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='absolute';left=l;top=t;zIndex=z;display=v}}document.body.appendChild(wnd);window._bI.wnd=wnd;wnd.contentWindow.document.write('&lt;style&gt;body{background-color:#ccc;}&lt;/style&gt;%20');wnd.contentWindow.document.close();})(400,200,1,'0px','0px',1000,'');}">IFRAME</a>


リンク(アンカー)の表示文字列が登録時の文字列になりますが、登録後に各ブラウザで変更する事ができます。

カスタマイズは、400,200,1,'0px','0px',1000,'' の部分を変更します

関連する記事

JavaScript : 通常の WEB ページにブックマークレットでアプリケーション用の IFRAME を埋め込むコード (2) / ページ表示部中央に固定
親(parent) フレームに jQuery が無い場合に jQuery をインストールする。


変更履歴
2011-03-20 : 初回投稿
2013-10-31 : 内容の再整備



posted by lightbox at 2014-11-04 21:49 | ブックマークレットコード | このブログの読者になる | 更新情報をチェックする
container 終わり



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

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり