Show toolbar

2011年8月4日 星期四

jsonp dynamic

標題:使用jsonp動態取得資料
HTML (index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-TW" xml:lang="zh-TW">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jsonp dynamic</title>
<script type="text/javascript">
function codeboxy(json) {
    document.getElementById("youtubeTitle").innerHTML = json.entry.title.$t;
}
function getYoutubeTitle() {
    var removeScript = document.getElementById('jsonScript');
    if(removeScript)
        removeScript.parentNode.removeChild(removeScript);
    var yid = document.getElementById('yid').value;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.id = 'jsonScript';
    script.src = "http://gdata.youtube.com/feeds/api/videos/" + yid + "?alt=json-in-script&callback=codeboxy";
    document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
</head>
<body>
<input type="text" id="yid" value="Sr3hyvjNp94" />
<input type="button" onClick="getYoutubeTitle()" value="Get" />
<div id="youtubeTitle"></div>
</body>
</html>
範例:



說明:
使用純JavaScript動態在Head產生jsonp script後,呼叫函式更新Youtube之Title資料。
支援IE6、FireFox、Chrome。

沒有留言:

張貼留言