您好，最近我有需要將XML資料呈現在HTML網頁上的需求，在網上也找過很多的程式碼，但結果似乎也是不行，我找到一段以下的JAVASCRIPT程式碼，很奇怪，我用DREAMWEAVER內置預覧可以呈現到資料，但將它存為網頁後，無論在CHROME或IE看都是空白，各位大大我想知道為什麼會這樣啊...？謝謝～
XML
<?xml version="1.0" encoding="windows-1252"?>
<rss version="2.0">
<items>
<item>
<title>Lorem</title>
<description>Lorem Ipsum</description>
<link>http://lorempixel.com/100/100/people/</link>
<image>http://lorempixel.com/100/100/people/</image>
</item>
<item>
<title>dolor sit amet</title>
<description>consectetur adipisicing elit, sed do eiusmod</description>
<link>http://lorempixel.com/100/100/food/</link>
<image>http://lorempixel.com/100/100/food/</image>
</item>
<item>
<title>tempor incididunt</title>
<description>ut labore et dolore magna aliqua.</description>
<link>http://lorempixel.com/100/100/city/</link>
<image>http://lorempixel.com/100/100/city/</image>
</item>
</items>
</rss>
JAVASCRIPT
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","http://alokation.com/temp/ParseXML/sample.xml",false);
xmlhttp.send(null);
xmlDoc=xmlhttp.responseXML;
document.write("<ul id='content' data-role='listview' data-inset='true'>");
var x=xmlDoc.getElementsByTagName("item");
for (i=0;i<x.length;i++)
{
document.write("<li><a href='"+x[i].getElementsByTagName("link")[0].childNodes[0].nodeValue+"'><img src='"+x[i].getElementsByTagName("image")[0].childNodes[0].nodeValue+"'/><h2>"+x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue+"</h2><p>"+x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue+"</p></a></li>");
}
document.write("</ul>");
我在這邊看到的：https://stackoverflow.com/questions/22543511/how-to-read-and-display-xml-content-in-html-page
已邀請的邦友 {{ invite_list.length }}/5
我用以下這段 HTML 可以達到你要的結果
但是是有前提的
如果你的 HTML 是本機的檔案而非放在 Web Server 上的話
那用瀏覽器開啟 HTML 會有安全性的警示(或限制)
如果你知道如何忽略/確認安全性限制的話
就可以得到你要的結果
否則
就會是一片空白
和瀏覽器的警告訊息(和被你忽略的驚嘆號提示)
<html>
<style>
img{
float: left;
padding-right: 20px;
}
ul li{
height: 100px;
list-style: none;
}
ul li:hover{
background-color: #ccc;
}
ul li a{
color: #555;
text-decoration: none;
}
ul li:hover a{
color: white;
}
</style>
<body>
<div id="main" >
</div>
</body>
<script type="text/javascript">
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","http://alokation.com/temp/ParseXML/sample.xml",false);
xmlhttp.send(null);
xmlDoc=xmlhttp.responseXML;
document.write("<ul id='content' data-role='listview' data-inset='true'>");
var x=xmlDoc.getElementsByTagName("item");
for (i=0;i<x.length;i++)
{
document.write("<li><a href='"+x[i].getElementsByTagName("link")[0].childNodes[0].nodeValue+"'><img src='"+x[i].getElementsByTagName("image")[0].childNodes[0].nodeValue+"'/><h2>"+x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue+"</h2><p>"+x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue+"</p></a></li>");
}
document.write("</ul>");
</script>
</html>
你這個xml是放在其他網站的吧
javascript在瀏覽器有個限制叫同源政策
ajax對於不同網站的資源是不能調用的
話說我用Chrome執行的時候出現了以下內容，
不知道這是什麼意思呢？
(p.s. Google翻譯真是好東西)
主線程上的XMLHttpRequest由於對最終用戶體驗的不利影響而被淘汰。 有關更多幫助，請訪問https://xhr.spec.whatwg.org/。
參考看看吧
關於chrome控制台警告：Synchronous XMLHttpRequest on the main thread終極解決辦法
(p.s.我也用Goole查出原文了)
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
iThome鐵人賽
看影片追技術