Yahoo! YUI Get UtilityでJavaScriptやCSSを読み込む方法

Yahoo!のYUI Get Utilityを利用して、JavaScriptや
CSS(スタイルシート)を読み込むことができます。

依存関係

下記のJavaScriptの読み込みが必要になります。

<script type="text/javascript"
src="http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-min.js"
></script>
<script type="text/javascript"
src="http://yui.yahooapis.com/2.5.2/build/get/get-min.js" ></script>

JavaScriptの読み込み

JavaScriptの読み込みには、YAHOO.util.Get.script()を使用します。

<script type="text/javascript">
YAHOO.util.Get.script(
	"http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js");
</scrtip>

CSSの読み込み

CSSの読み込みには、YAHOO.util.Get.css()を使用します。

<script type="text/javascript">
YAHOO.util.Get.css(
	"http://yui.yahooapis.com/2.5.2/build/reset/reset-min.css");
</scrtip>

複数のJavaScript/CSSの読み込み

複数のJavaScriptやCSSを読み込む場合には、配列でファイル名(URL)を
渡すことにより実現可能です。

<script type="text/javascript">
var urls = ["http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js",
	"http://yui.yahooapis.com/2.5.2/build/history/history-min.js"]);
YAHOO.util.Get.script(urls);
</scrtip>

ロードにアクションが必要な場合

JavaScript/CSSを読み込んだ後に、アクションが必要な場合には、
YAHOO.util.Get.scrtip/ YAHOO.util.Get.css の第2引数で
onSuccessのイベントに指定します。

<script type="text/javascript">
YAHOO.util.Get.script(
	["http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js",
	"http://yui.yahooapis.com/2.5.2/build/history/history-min.js"],
	{
	onSuccess: function() { /* doit */ }
	});
</scrtip>

サンプルコード

<html><head><title>script loader</title></head><body>

		<h1>Yahoo Get Utility</h1>

		<p id="contents">
		test
		</p>

<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/event/event-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/get/get-min.js" ></script>
<script type="text/javascript" >
	function init(){
		var Get = YAHOO.util.Get;
		Get.script(["http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js",
				"http://yui.yahooapis.com/2.5.2/build/history/history-min.js"],
				{ onSuccess: function() {
				$('#contents').html("jQuery loaded");
				} });
		Get.css("http://yui.yahooapis.com/2.5.2/build/reset/reset-min.css");
	}
YAHOO.util.Event.onDOMReady(init);
</script>
</body></html>

いつもシェア、ありがとうございます！

もっと情報を探しませんか？

yahoo

過去ログ

2020 : 01 02 03 04 05 06 07 08 09 10 11 12
2019 : 01 02 03 04 05 06 07 08 09 10 11 12
2018 : 01 02 03 04 05 06 07 08 09 10 11 12
2017 : 01 02 03 04 05 06 07 08 09 10 11 12
2016 : 01 02 03 04 05 06 07 08 09 10 11 12
2015 : 01 02 03 04 05 06 07 08 09 10 11 12
2014 : 01 02 03 04 05 06 07 08 09 10 11 12
2013 : 01 02 03 04 05 06 07 08 09 10 11 12
2012 : 01 02 03 04 05 06 07 08 09 10 11 12
2011 : 01 02 03 04 05 06 07 08 09 10 11 12
2010 : 01 02 03 04 05 06 07 08 09 10 11 12
2009 : 01 02 03 04 05 06 07 08 09 10 11 12
2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12
2003 : 01 02 03 04 05 06 07 08 09 10 11 12