<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>FoxLing - 前端开发 &#187; 动态加载</title>
	<atom:link href="http://foxling.org/tag/%e5%8a%a8%e6%80%81%e5%8a%a0%e8%bd%bd/feed/" rel="self" type="application/rss+xml" />
	<link>http://foxling.org</link>
	<description>我还在寻找方向</description>
	<lastBuildDate>Tue, 10 Apr 2012 16:48:41 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>如何动态加载JS文件</title>
		<link>http://foxling.org/js-ajax-dom/dynamically-insert-javascript/</link>
		<comments>http://foxling.org/js-ajax-dom/dynamically-insert-javascript/#comments</comments>
		<pubDate>Tue, 02 Dec 2008 00:08:49 +0000</pubDate>
		<dc:creator>FoxLing</dc:creator>
				<category><![CDATA[JS/AJAX/DOM]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[动态加载]]></category>

		<guid isPermaLink="false">http://wp.foxling.cn/as-flex-air/trends-load-javascript-file/</guid>
		<description><![CDATA[今天在群里，看有人提到动态加载JS的问题，便整理如下： function loadJs(jsFile){ if (!jsFile) return; var oHead = document.getElementsByTagName('HEAD')[0]; var oScript = document.createElement('script'); oScript.type = "text/javascript"; oScript.src = jsFile; oHead.appendChild(oScript); } 上面的代码初步地完成了一个JS文件的加载过程，调用”loadJs(指定的js文件名);”就可以加载指定的JS了。 但还不够完善，为了避免重复加载，需要进行一点小小的改动： function loadJs(jsFile){ if (!jsFile) return; var oScripts = document.getElementsByTagName('script'); for (var i=0; i&#60;oScripts.length; i++){ if (oScripts[i].src.indexOf(jsFile) > -1) return; } var oHead = document.getElementsByTagName('HEAD')[0]; var oScript = document.createElement('script'); oScript.type = "text/javascript"; [...]]]></description>
			<content:encoded><![CDATA[<p>今天在群里，看有人提到动态加载JS的问题，便整理如下：</p>
<pre>
function loadJs(jsFile){
if (!jsFile) return;
var oHead = document.getElementsByTagName('HEAD')[0];
var oScript = document.createElement('script');
oScript.type = "text/javascript";
oScript.src = jsFile;
oHead.appendChild(oScript);
}
</pre>
<p>上面的代码初步地完成了一个JS文件的加载过程，调用”loadJs(指定的js文件名);”就可以加载指定的JS了。<br />
但还不够完善，为了避免重复加载，需要进行一点小小的改动：</p>
<pre>
function loadJs(jsFile){
    if (!jsFile) return;
    var oScripts = document.getElementsByTagName('script');
    for (var i=0; i&lt;oScripts.length; i++){
        if (oScripts[i].src.indexOf(jsFile) > -1) return;
    }
    var oHead = document.getElementsByTagName('HEAD')[0];
    var oScript = document.createElement('script');
    oScript.type = "text/javascript";
    oScript.src = jsFile;
    oHead.appendChild(oScript);
}
</pre>
<p>如果已经加载了该JS，就跳过下面的步骤，这样，就不会重复加载了。但这样也不是万无一失~因为如果这时候马上执行JS里的脚本的话，也许会提醒你未定义，因为该JS还未加载完成。</p>
<p>&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;-<br />
2010-03-02 更新</p>
<p>判断是否加载完成，区别于IE和其它浏览器，可以使用<br />
onload事件和onreadystatechange事件来判断<br />
ie不支持onload事件，通过onreadystatechange事件判断readyState属性是否是”loaded”或者”complete”即加载完成<br />
其它浏览器如FF，Chrome，Safari，Opera可以通过onload事件判断是否加载完成。</p>
]]></content:encoded>
			<wfw:commentRss>http://foxling.org/js-ajax-dom/dynamically-insert-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

