position = 'fixed'; 等 により、ページをスクロールしても、IFRAME が画面中央に留まりますページ中央固定 IFRAMEこれで何をするかというと、この IFRAME の中に SCRIPT 要素を document.write して、画面作成します。画面が出来たら、元々の親ページをコントロールする機能を実装します。 ▼ ブックマークレット
<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の最新記事】
- Firebase の Realtime Database の JSON を jQuery の $.ajax で読み込んで TABLE を作成する
- Firebase に定義した Realtime Database の API を使用して TABLE を作成する
- IE や Firefox の開発者ツールのコンソールで簡単に localStorage を見る為の1行コード
- テキストエリアでタブ処理
- ブラウザ判定 : String.prototype.browser に登録して、文字列と実際のブラウザが一致したら true を返す
- jQuery UI の datepicker を使用した現在の日付文字列の取得 と 一般的な現在の日付文字列の加工取得処理
- geolocation を使用して『都道府県選択コンボボックス』の初期値を現在の緯度・経度から選択する
- 雪を降らす snowstorm.js の 特定 DIV 内での実装
- JavaScript : ブックマークレットの作り方
- いまさらですが、JavaScript で、グローバル領域を汚さない変数宣言の使用方法
- 二回目のロードは無視する、JavaScrip ライブラリの基本スケルトン
- JavaScript の全ての オブジェクトに同じ機能を持たせる
- JavaScript : コンボボックスの OPTION 部分の操作でたいていのテクニック
- JavaScript : 文字列で表現された日付を論理チェック
- HighslideJS 用貼り付けコード作成
- テキストエリアに入れた JSON データをチェックするコード(F12等の開発者ツールも使う) / JSON.stringify と JSON.parse
- エレメント(主にPRE)を選択状態にする
- JS : function() {} という『無名の処理』の理解
- GoogleVisualizationAPIを使用したブラウザ比率の円グラフ(2009年3月〜) / IE がまだ半分を占めてます
- Safari for windows の alert







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





















