ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文
jQuery : ウインドウにフィットする、IFRAME 組み込みプラグイン
日時: 2016/11/12 18:56
名前: lightbox



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>IFRAME jQuery プラグイン</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<style>
body {
	margin: 0;
}

#base {
	padding: 20px;
}
</style>

<script>

$.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 );

	}
});


$(function() {

	$( "#base" ).lboxiframe({
		src : "http://localhost/firebase/static/pass2upd/",
		id : "my_iframe",
		name : "my_iframe"
	});

});
</script>

</head>
<body>
<div id="base">
<input id="a1"><br>
<input id="a2"><br>
</div>


</body>
</html>

メンテナンス


日時: 2016/11/12 18:56
名前: lightbox