まず最初に。document.writeこのメソッドは、DOM の準備ができているときとまだ初期化中のときとで動作が異なるため、使用しないようにしてください。その悪い習慣と見なされます。
また、関数を使用してコードの複雑さを解消し、読みやすくすることもお勧めします。
XHR オブジェクトは同期ではないことに注意してください。readystatechangeイベントを介して xml データが取得されるまで待つ必要があります。
最後に、ブラウザで html の文字列を作成する必要はありません。DOM API を使用すると、DOM ツリーにアタッチできる適切なノードとしてアンカー タグとイメージ タグを作成できます。
それが役立つことを願っています。
(function() {
//fetch the gallery photos
getXML('include/photoLibrary.xml', function(xml) {
var photos, pI, photo, anchor, image, anchors = [];
//pick four photos at random
photos = getRandom(makeArray(xml.getElementsByTagName('photo')), 4);
//build out each photo thumb
for(pI = 0; pI < photos.length; pI += 1) {
photo = photos[pI];
//create the anchor
anchor = document.createElement('a');
anchor.setAttribute('href', photo.getElementsByTagName('path')[0].childNodes[0].nodeValue);
anchor.setAttribute('class', 'lytebox');
anchor.setAttribute('data-lyte-options', 'group:vacation');
anchor.setAttribute('data-title', photo.getElementsByTagName('description')[0].childNodes[0].nodeValue);
//create the image
image = document.createElement('img');
image.setAttribute('src', photo.getElementsByTagName('thumb')[0].childNodes[0].nodeValue);
image.setAttribute('alt', photo.getElementsByTagName('title')[0].childNodes[0].nodeValue);
//insert the image into the anchor
anchor.appendChild(image);
//insert the anchor into the body (change this to place the anchors else were)
anchors.push(anchor);
}
//when the DOM is loaded insert each photo thumb
bind(window, 'load', function() {
var aI;
for(aI = 0; aI < anchors.length; aI += 1) {
//replace document.body with whatever container you wish to use
document.body.appendChild(anchors[aI]);
}
});
});
/**
* Fetches an xml document via HTTP method GET. Fires a callback when the xml data
* Arrives.
*/
function getXML(url, callback) {
var xhr;
if(window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if(window.ActiveXObject) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} else {
throw new Error('Browser does not support XML HTTP Requests.');
}
//attach the ready state hander and send the request
xhr.onreadystatechange = readyStateHandler;
xhr.open("GET","photos.xml",false);
xhr.send();
function readyStateHandler() {
//exit on all states except for 4 (complete)
if(xhr.readyState !== 4) { return; }
//fire the callback passing the response xml data
callback(xhr.responseXML);
}
}
/**
* Takes array likes (node lists and arguments objects) and converts them
* into proper arrays.
*/
function makeArray(arrayLike) {
return Array.prototype.slice.apply(arrayLike);
}
/**
* Extracts a given number of items from an array at random.
* Does not modify the orignal array.
*/
function getRandom(array, count) {
var index, randoms = [];
//clone the original array to prevent side effects
array = [].concat(array);
//pull random items until the count is satisfied
while(randoms.length < count) {
index = Math.round(Math.random() * (array.length - 1));
randoms.push(array.splice(index, 1)[0]);
}
return randoms;
}
function bind(element, eventName, callback) {
if(typeof element.addEventListener === 'function') {
return element.addEventListener(eventName, callback, false);
} else if(typeof element.attachEvent === 'function') {
return element.attachEvent('on' + eventName, callback);
}
}
})();
編集: 3 つのエラーを修正しました。ノードを挿入する前に DOM をロードする必要があります。XML ノードには innerHTML プロパティがありません。Array.concat は、DOM NodeList オブジェクトを配列として認識しません。