|
|
日時： 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>
|
jQuery : ウインドウにフィットする、IFRAME 組み込みプラグイン