DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> 浏覽器跨域獲取Lrc歌詞數據的解決辦法
浏覽器跨域獲取Lrc歌詞數據的解決辦法
編輯:AJAX詳解     

獲取同一個域的數據,可以通過XMLHTTP組件或IFRAME來實現,不存在跨域訪問的權限問題,因此比較簡單。
    但如果要訪問不同域的數據時,由於浏覽器的安全設置,XMLHTTP沒有權限獲取數據,而IFRAME沒有權限將獲取的數據傳遞給父窗口,似乎沒有其它解決辦法。
    頓悟……
    網頁內引用不同域的腳本並不會提示權限不足,對了,就是它沒錯!
    解決方法找到了,現在來簡單測試一下:
    首先在51JS.com服務器上新建一頁面(Test.Html)。
可運行代碼:<Html>
<head>
<title> Over-Domain Data Fetching Test Page</title>
<script type="text/Javascript">
var lastScript;
var h=document.getElementsByTagName("head")[0];

function loadScript(url){
var f=document.createElement("script");
var d=new Date().getTime();
f.type="text/Javascript";
f.id=d;
f.src=url+'?'+d;
h.appendChild(f);
if(lastScript) g(lastScript).parentNode.removeChild(g(lastScript));
lastScript=d;
}

function g(x){return document.getElementById(x)};
</script>
</head>

<body>
<button >Test Alert</button>
 
<button >Get My Info</button>
 
My Name: <input id="myname" type="text" value="">
 
My Blog: <input id="myblog" type="text" value="">
</body>
</Html>
  [Ctrl+A 全選 提示:你可先修改部分代碼,再按運行]
    解釋兩個關鍵點:
    1. lastScript用於存放上次建立的script節點的ID,在下次要再新建script節點時,要刪除上次建立的節點,以免加載的腳本越來越多,占用過多的內存。
    2. url後面加了一個數值d是為了防止浏覽器緩存腳本數據,在本例中可以不加,但是如果腳本是由服務器動態生成的,那最好加上。
    然後再建立兩個Java script腳本用於測試。
alert.JS:
alert('You can see me!');
info.JS:
g('myname').value='譜樂視聽';
g('myblog').value='www.aboutplayer.com';
    好了,譜樂已把它們放在aboutplayer.com服務器下,這樣它們和Test.Html就不在同一個域內了。
    用浏覽器打開Test.Html文件。
    點擊“Test Alert”,應該會彈出對話框顯示You can see me!。
    點擊“Get My Info”,應該會在文本框中顯示本站的信息。
    進而,若把Lrc歌詞數據放入JS腳本文件中(不是直接更改文件擴展名),就可實現跨域獲取Lrc歌詞數據了。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved