childwin2.js
5.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
//グローバル変数の定義
var httpObj; // HTTP通信用オブジェクト
var timerId; // HTTP通信用タイマーオブジェクト
var timeout_sec = 10; // HTTP通信タイムアウト秒数
var fadeout_opacity = 70; // 子ウィンドウの不透明度初期値
var fadeout_timer; // 子ウィンドウフェードアウト用タイマーオブジェクト
// 子ウィンドウを閉じる
function closeChildWindow() {
var board = document.getElementById('board');
var ua = navigator.userAgent;
if(ua.indexOf("Opera") >= 0) {
board.style.visibility = 'hidden';
return;
}
var func_ref = function() {
fadeout_opacity = fadeout_opacity - 10;
if(fadeout_opacity <= 0) {
clearInterval(fadeout_timer);
board.style.visibility = 'hidden';
fadeout_opacity = 70;
}
board.style.filter = 'alpha(opacity=' + fadeout_opacity + ')'; // Internet Explorer用
var non_ie_opacity = fadeout_opacity / 100;
board.style.mozOpacity = non_ie_opacity; // FireFox用
board.style.opacity = non_ie_opacity; // Safari用
};
fadeout_timer = setInterval(func_ref, 100);
}
// 子ウィンドウを開く
function openChildWindow(e) {
var board = document.getElementById('board');
board.style.left = e.clientX + 'px';
board.style.top = e.clientY + 'px';
board.style.visibility = 'visible';
// チェックされたリンクのid属性値を取得
var target_node;
if(e.target) {
target_node = e.target;
} else if(e.srcElement) {
target_node = e.srcElement;
}
// Safari対策
if (target_node.nodeType == 3) {
target_node = target_node.parentNode;
}
var checked_link = target_node.id;
// テキストファイルのURLを定義
var target_url;
if(checked_link == 'tokyo') {
target_url = 'content1.txt';
} else if(checked_link == 'nagoya') {
target_url = 'content2.txt';
} else if(checked_link == 'osaka') {
target_url = 'content3.txt';
}
// 処理を実行するための関数リファレンスを定義
var funcRef = function(text_data) {
var content = document.getElementById('content');
content.innerHTML = text_data;
// 透明度を変更する
board.style.filter = 'alpha(opacity=70)'; // Internet Explorer用
board.style.mozOpacity = 0.7; // FireFox用
board.style.opacity = 0.7; // Safari用
}
// HTTP通信を開始し、完了したら上記関数を実行させる
httpRequest(target_url, funcRef);
}
// 引数に与えられたURLにHTTPリクエストを行ない、指定された関数を実行
function httpRequest(target_url, funcitonReference) {
try {
if(window.XMLHttpRequest) {
httpObj = new XMLHttpRequest();
} else if(window.ActiveXObject) {
httpObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
httpObj = false;
}
} catch(e) {
httpObj = false;
}
if(! httpObj) {
httpObjGenerateFail();
}
// タイマーをセット
timerId = setInterval('timeoutCheck()', 1000);
httpObj.open("GET", target_url, true);
httpObj.onreadystatechange = function() {
if (httpObj.readyState == 4) {
clearInterval(timerId);
if (httpObj.status == 200) {
funcitonReference(httpObj.responseText);
} else {
alert(httpObj.status + ' : ' + httpObj.statusText);
return false;
}
}
}
httpObj.send('');
}
// XMLHttpRequestオブジェクト生成に失敗した場合の処理
function httpObjGenerateFail() {
alert('ご利用のブラウザーでは、当サイトをご利用頂けません。');
return false;
}
// HTTPタイムアウト処理
function timeoutCheck() {
timeout_sec --;
if(timeout_sec <= 0) {
// タイマーをストップする
clearInterval(timerId);
// HTTPリクエストを中断する
httpObj.abort();
// エラーダイアログを表示
alert('タイムアウトです。');
return false;
}
}
// イベントリスナーをセットする
function setListeners(e) {
var tokyo = document.getElementById('tokyo');
addListener(tokyo, 'click', openChildWindow, false);
var nagoya = document.getElementById('nagoya');
addListener(nagoya, 'click', openChildWindow, false);
var osaka = document.getElementById('osaka');
addListener(osaka, 'click', openChildWindow, false);
var close = document.getElementById('close');
addListener(close, 'click', closeChildWindow, false);
}
function addListener(elem, eventType, func, cap) {
if(elem.addEventListener) {
elem.addEventListener(eventType, func, cap);
} else if(elem.attachEvent) {
elem.attachEvent('on' + eventType, func);
} else {
alert('ご利用のブラウザーはサポートされていません。');
return false;
}
}
// HTMLがロードされた際に、setListeners()関数を実行させる
addListener(window, 'load', setListeners, false);