※ ChatGPTを利用し、要約された質問です（原文：XHTML（厳格）でJavaScriptが動かない）
XHTML（厳格）でJavaScriptが動かない
このQ&Aのポイント
XHTMLでJavaScriptが動かないという問題について質問しています。
XHTMLで奨励されているContent-type: application/xhtml+xmlで出力するとJavaScriptが動かないが、text/htmlに出力すると動作するという現象について解決方法を求めています。
d.body.appendChild(imgPop)のコードがエラーもなく動かないことが問題であり、mime typeを変更せずに解決する方法を探しています。
XHTML（厳格）でJavaScriptが動かない
ソースを書くと見ずらいので、
ＵＲＬで提示しますと
http://martin.p2b.jp/index.php?UID=1115484023
の部分ですが、
d.body.appendChild(imgPop);
（d=document と宣言されているとする）
で、エラーもなく、どのブラウザーでも何も動いてくれません。
ちなみに、XHTMLで奨励されている
Content-type: application/xhtml+xml
で出力するようにしています。
(metaでは一切宣言してません）
これを普通に、text/html に出力させるだけで
動作するのはするのですが・・・
どなたか、mime type を変更せずに
解決できる方はいらっしゃいますでしょうか？
よろしくお願いします。
p.s.
d.body.innerHTML="hoge";
はできるようです。
------------
見ずらいですが、ソースはこちら
var d=document;
function getClientWidth(){
if(self.innerWidth){
return self.innerWidth;
} else if(d.documentElement && d.documentElement.clientWidth){
return d.documentElement.clientWidth;
} else if(d.body){
return d.body.clientWidth;
}
}
function getClientHeight(){
if(self.innerHeight){
return self.innerHeight;
} else if(d.documentElement && d.documentElement.clientHeight){
return d.documentElement.clientHeight;
} else if(d.body){
return d.body.clientHeight;
}
}
function getScrollY(){
if(typeof window.pageYOffset != "undefined"){
return window.pageYOffset;
} else if(d.body && typeof d.body.scrollTop != "undefined"){
if(d.compatMode == 'CSS1Compat'){
return d.documentElement.scrollTop;;
}
return d.body.scrollTop;
} else if(d.documentElement && typeof d.documentElement.scrollTop != "undefined"){
return d.documentElement.scrollTop;
}
return 0;
}
var imgPop = null;
imagePop = function (e, path, w, h){
if(imgPop==null){
imgPop = d.createElement("IMG");
imgPop.src = path;
with (imgPop.style){
position = "absolute";
left = Math.round((getClientWidth()-w) / 2) + "px";
top = Math.round((getClientHeight()-h) / 2 + getScrollY()) + "px";
margin = "0";
zIndex = 1000;
border = "4px groove Teal";
display = "none";
}
d.body.appendChild(imgPop);
if(imgPop.complete){
imgPop.style.display = "block";
} else window.status = "画像読み込み中…";
imgPop.onload = function(){imgPop.style.display="block"; window.status="";}
imgPop.onclick = function(){d.body.removeChild(imgPop);imgPop=null;}
imgPop.title = "マウスクリックで閉じます";
}
}
お礼
ありがとうございました。 無事に動くようになりました。 body要素の直下に、imgを挿入することも、ほとんどのブラウザーで きちんと動作していることを確認しました。 半日間、必死に検索しても、そのような項目がなくて、戸惑っていたいた 所です。 ちなみに、DTDは以下のようになっています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">