ＳＱＬの窓 イラストAC フリー素材
<< タスクマネージャについていろいろ | TOP | Windows 用の良く「使えそうな」いろいろ… >>

2014年03月04日

JavaScript(jQuery 自家製プラグイン) によるIFRAMEの動的実装

 
これ自体はたいした内容ではありませんが、用途や需要は結構あるのでは無いかと思っています。DOM で書くと簡単でも、あらためて jQuery で書くと新鮮だったりします。



<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>
<script>
$.fn.extend({ 
	iframe: function(url,w,h){
		this.html("");

		// IFRAME 作成
		var obj = document.createElement("iframe");
		obj.setAttribute("frameBorder", "1");
		obj.setAttribute("scrolling", "no");
		obj.style.position = "relative";
		obj.style.width = w+"px";
		obj.style.height = h+"px";
		obj.src = url
		this.append(obj);
	}  
});

$(function(){
	$("#iframe_base").iframe("https://lh3.googleusercontent.com/-YEY-LGIec58/Uq78JcmXG_I/AAAAAAAARs4/Cq8VdOEe1TA/s500/freefont_hanko_kana014.png",500,500)
});

</script>
<input type="button" value="変更" onclick='$("#iframe_base").iframe("https://lh5.googleusercontent.com/-qU5uL1LvaM8/UtN7Rhtr3RI/AAAAAAAASEY/tglCi9sGuf8/s250/_img.png",250,250)'>
<div id="iframe_base"></div>


で、どうせなのでアニメーションを追加しました



<script>
if ( !window.jQuery ) {
	if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
		if ( window.addEventListener ) {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
		}
		else {
			window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
		}
	}
	document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>
<script>
$.fn.extend({ 
	iframe: function(url,w,h){
		this.html("");

		// IFRAME 作成
		var obj = document.createElement("iframe");
		obj.setAttribute("frameBorder", "1");
		obj.setAttribute("scrolling", "no");
		obj.style.position = "relative";
		obj.style.width = w+"px";
		obj.style.height = h+"px";
		obj.src = url
		this.append(obj);
	},
	iframeChange: function(url,w,h){
		this.animate({ opacity: 0 }, 1500, "swing", function() {
			$(this).iframe(url,w,h);
			$(this).animate({ opacity: 1 },3000);
		});
	}  
});

$(function(){
	$("#iframe_base").iframe("https://lh3.googleusercontent.com/-YEY-LGIec58/Uq78JcmXG_I/AAAAAAAARs4/Cq8VdOEe1TA/s500/freefont_hanko_kana014.png",500,500)
});

</script>
<input type="button" value="変更" onclick='$("#iframe_base").iframeChange("https://lh5.googleusercontent.com/-qU5uL1LvaM8/UtN7Rhtr3RI/AAAAAAAASEY/tglCi9sGuf8/s250/_img.png",250,250)'> <input type="button" value="戻す" onclick='$("#iframe_base").iframeChange("https://lh3.googleusercontent.com/-YEY-LGIec58/Uq78JcmXG_I/AAAAAAAARs4/Cq8VdOEe1TA/s500/freefont_hanko_kana014.png",500,500)'>
<div id="iframe_base"></div>
【jQueryの最新記事】
posted by at 2014-03-04 00:05 | jQuery | このブログの読者になる | 更新情報をチェックする


Powered by Seesaa