SQLの窓 イラストAC フリー素材

2014年11月07日

ブックマークレットから、ページ中央に固定する IFRAME ウインドウを作成する

position = 'fixed'; 等 により、ページをスクロールしても、IFRAME が画面中央に留まります






これで何をするかというと、この IFRAME の中に SCRIPT 要素を document.write して、画面作成します。画面が出来たら、元々の親ページをコントロールする機能を実装します。

▼ ブックマークレット
ページ中央固定 IFRAME

<a href="javascript:if(!window['_bI']){window._bI={};(function(w,h,b,z,v,c){var%20wnd=document.createElement('iframe');with(wnd){width=w;height=h;with(style){border='solid%20'+b+'px%20#000000';position='fixed';left='50%';top='50%';zIndex=z;display=v;marginLeft=(((w/2)*-1)+'px');marginTop=(((h/2)*-1)+'px');borderRadius='8px';boxShadow='0%2015px%2010px%20-10px%20rgba(0,0,0,0.5),0%201px%204px%20rgba(0,0,0,0.3),0%200%2040px%20rgba(0,0,0,0.1)%20inset';}}document.body.appendChild(wnd);window._bI.wnd=wnd;wnd.contentWindow.document.write('<style>body{background-color:#'+c+';}</style>');wnd.contentWindow.document.close();})(400,200,1,1000,'','DDE8BE');}" onclick=" 
		alert('ブックマークバーにドロップか、IEでは右クリックでお気に入りに登録(お気に入りバー)が簡単です'); 
		if (window.navigator.appName.toLowerCase().indexOf('microsoft') > -1) { 
			event.returnValue = false; 
		} 
		event.preventDefault(); 
		event.stopPropagation();
	">ページ中央固定 IFRAME</a>
上のコードは、ブックマークレット登録用に作成されています。以下のコードは、内容を正しく確認する為に通常の整形をしたものです。
<script type="text/javascript">
if (!window['_bI']) {
    window._bI = {};
    (function(w, h, b, z, v, c) {
        var wnd = document.createElement('iframe');
        with(wnd) {
            width = w;
            height = h;
            with(style) {
                border = 'solid ' + b + 'px #000000';
                position = 'fixed';
                left = '50%';
                top = '50%';
                zIndex = z;
                display = v;
                marginLeft = (((w / 2) * -1) + 'px');
                marginTop = (((h / 2) * -1) + 'px');
                borderRadius = '8px';
                boxShadow = '0 15px 10px -10px rgba(0,0,0,0.5),0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset';
            }
        }
        document.body.appendChild(wnd);
        window._bI.wnd = wnd;
        wnd.contentWindow.document.write('<style>body{background-color:#' + c + ';}</style>');
        wnd.contentWindow.document.close();
    })(400, 200, 1, 1000, '', 'DDE8BE');
}
</script>

window['_bI']

window['_bI'] は、window._bI というプロパティが定義されていない場合にのみ処理を行うようにしたもので、処理が行われると、window._bI = {}; が実行されて、2回目以降はなにも実行されなくなります。
※ 最初は、window['_bI'] は undefined です。

IFRAME を作成

document.createElement で、動的に iframe 要素を作成して、その iframe の属性を設定する為に、with(wnd) ブロック内で iframe の プロパティを設定しています。document.createElement で作成された要素は、そのままでは有効にならず、document.body.appendChild(wnd); で本体の body に追加されて有効(表示される)になります。

※ 23行目で、window._bI に作成した iframe をセットしているので、後からプロパティの変更が可能です。

IFRAME の背景色を設定

wnd.contentWindow.document.write によって( 最後に wnd.contentWindow.document.close() が必要です )、自由に iframe 内にコンテンツを作成する事ができます。この時点では、まだ CSS だけですが、画面定義や外部参照ライブラリによって iframe 内を JavaScript だけで完成させる事ができます


関連する記事

親(parent) フレームに jQuery が無い場合に jQuery をインストールする。



【JavaScriptの最新記事】
posted by at 2014-11-07 13:32 | Comment(0) | JavaScript | このブログの読者になる | 更新情報をチェックする
SQLの窓全体の検索
Custom Search
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX