SQLの窓

2016年11月21日


かつての FRAME のように画面下部に張り付く IFRAME を実装する jQuery プラグイン

デモページ


デモページでは、実装コードを解りやすくする為に、IFRAME 内には大きな画像を表示していますが、本来はヘッド部分で値を入力して送信の結果を IFRAME に表示する問い合わせ系アプリケーションに利用しやすくなっています。

プラグインを実装したテンプレートページ


プラグインのコード

https://lightbox.sakura.ne.jp/demo/template/static/pass1iframe/std/lboxiframe.js
$.fn.extend({ 
	lboxiframe: function(option){

		var parent = $(this);

		$("<iframe name=\""+ option.name +"\">").insertAfter($(this))
			.attr("src",option.src)
			.attr("id",option.id)
			.attr("frameborder", "0")
			.css("width", "100%" )
			;

		function control_page_iframe(iframe,parent) {
			var height = Math.max(document.documentElement.scrollHeight,document.body.scrollHeight);
			var head_height = parent.get(0).clientHeight;

			// -8 は、IE と Firefox 用。Google Chrome は 0 で正しくフィットするが、
			// IE と Firefox では、BODY のスクロールバーが表示されてしまうので調整
			iframe.css("height", (height - parseInt(head_height)-8) + "px");
		}

		$(window).on("resize", function(){
	
			$("#" + option.id ).hide();
			control_page_iframe( $("#" + option.id ), parent );
			$("#" + option.id ).show();
	
		});

		control_page_iframe( $("#" + option.id ), parent );

	}
});
Google Chrome では ブラウザにきっちり収まるのですが、Firefox と IE では、下部に多少の余白が発生します。クロスブラウジングは避けたかったのと、補正値が過去変化したのでこのようになってますが、簡単で一般的なアプリケーションであれば、特に問題は出ないと思います。

呼び出し

対象とした div の下に IFRAME を埋め込みます。
$(function(){
	$( "#wrapper" ).lboxiframe({
		src : "simple-image.html",
		id : "my_iframe",
		name : "my_iframe"
	});
});



posted by lightbox at 2016-11-21 21:05 | プラグイン:jQuery | このブログの読者になる | 更新情報をチェックする
container 終わり



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

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