BACK
2008-03-25

IE6のDOM実装の怪〜工事中〜

うごきましぇん。

この日記システムはハッカーならご存知のとおり(謎)、
日記入力->確認画面+画像ファイルUP=>出力の構成になってます。
しかし今の時代、ファイルUP欄くらい動的に出さないとヤヴァイかなと思い
JavaScriptで動的に出すように変えてみたのですが…

HTMLタグの属性はめ@IE6がどうにも動かない。
Webで見た感じみなさん苦しんでおられて
回避策がいくつか載っているのですが、やはり回避は回避で美しくない…
しかもname属性は回避しても消えてしまうし、もうわけわかめです。
tableもtbody必須とか、DOM実装おかしくないですか@@;

他の無料ブラウザは動くのに…さすがGates。
まあそうはいっても、シェアが大きいソフトには合わせなければならないSaga。
でも、管理画面だからこのままで、FireFoxオンリーもいいんだよね…(ぉ

ソースなど晒し載せてみたり。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
<title>愚者の日記帳(画像UP)</title>
<script language="JavaScript">
<!--
var photoCnt = 0;
var removeButtonHead = "remove_photo_";

function addPhotoFile(){
 form1.body.value = form1.body.value + "##" + photoCnt + "##";

 var files = document.getElementById("files");

 var tr = createPhotoTr();
 files.appendChild(tr);
 photoCnt++;
}

function removePhotoFile(){
 alert("aaa");
}

function createPhotoTr(){
 var tr = document.createElement("tr");

 tr.appendChild( createPhotoNumTd() );
 tr.appendChild( createPhotoFileTd() );
 tr.appendChild( createPhotoRemoveTd() );

 return tr;
}

function createPhotoNumTd(){
 return createTd(photoCnt);
}

function createPhotoFileTd(){
 var td = createTd("");
 td.appendChild( createFile(photoCnt) );
 return td;
}

function createPhotoRemoveTd(){
 var td = createTd("");
 td.appendChild( createRemoveButton() );
 return td;
}

function createRemoveButton(){
 var button = createButton( removeButtonHead + photoCnt, "DEL" );
 var onclick = document.createAttribute('onClick');
 onclick.value = "removePhotoFile();";
//ささりまへん。
 button.setAttributeNode( onclick );
 return button;
}

//name属性が…消えました
function createFile(name){
 var file = document.createElement("input");
 file.type = "file";
 file.name = name;

 return file;
}

function createButton( name, val ){
 var button = document.createElement("input");
 button.type = "button";
 button.name = name;
 button.value = val;

 return button;
}

function createTd(text){
 var td = document.createElement("td");
 var tnode = document.createTextNode(text);
 td.appendChild(tnode);
 return td;
}

function showSource(){
 alert(document.body.innerHTML);
}

//->>
</script>
</head>
<body>
<form method="post" name="form1" action="ひみつ.cgi" enctype="multipart/form-data">
<input type="hidden" name="mode" value="add_photo">
<input type="hidden" name="diary_id" value="<!-- TMPL_VAR name="diary_id" -->">
<!-- TMPL_LOOP name="photo_boxs" -->
<!-- TMPL_VAR name="photo_number" --><input type="file" size="20" name="<!-- TMPL_VAR name="photo_number" -->"><br>
<!-- /TMPL_LOOP -->

<table>
<tbody id="files">
</tbody>
</table>

NAME:<input type="text" name="name" value="<!-- TMPL_VAR name="name" -->"><br>
TITLE:<input type="text" name="title" value="<!-- TMPL_VAR name="title" -->"><br>
<input type="button" name="photo" value="画像" onClick="addPhotoFile();"><br>
<input type="button" name="source" value="ソース" onClick="showSource();"><br>
<textarea name="body" cols="100" rows="30"><!-- TMPL_VAR name="body" --></textarea><br>
<input type="submit" name="submit" value="OK">
</form>
</body>
</html>


BACK