作者s25g5d4 (死城盜賊)
看板Ajax
標題Re: [問題] 有辦法完全不用innerHTML嗎？
時間Thu Jul 8 19:07:19 2010
恩 應該是完整了 包括糟糕的IE6也可以
新增的有
CSS
包括IE6的position fixed hack
javascript
修改原本兩個function 並新增一個cleanLastSearch()於每次呼叫search()時執行
HTML
一切都是為了IE
還有..上傳以後無意間發現用以下連結
http://s25g5d4.sg1010.myweb.hinet.net/123v2.htm
似乎沒廣告?
http://s25g5d4.myweb.hinet.net/123v2.htm
CSS部份與本版較不相關
只是IE6 position fixed hack想提出來
我是在這看到的
http://www.jaceju.net/blog/?p=577
以下為javscript:
function search(target,search_str){
cleanLastSearch(target); //先清除上次反白的部份
var tag=target.firstChild;
if(search_str.value!=""){
while(1) {
if(tag.hasChildNodes())
search(tag,search_str);
if(tag.nodeName=="#text") {
if(tag.nodeValue.match(search_str.value)) {
var a=tag.nodeValue.split(search_str.value); //直接切了 不叫RegExp
tag=replace_str(a,tag,search_str.value);
}
}
if(tag.nextSibling==null)
return;
else
tag=tag.nextSibling;
}
}
else
return;
}
function replace_str(array,target,search_str) { //注意 這個函數被我砍掉重練
for(i=0;i<array.length;i++) {
if(array[i]!="")
target.parentNode.insertBefore(document.createTextNode(array[i]),target);
if(i<array.length-1) { //不減一的話 該行最後會多一個字
var a=document.createElement("b");
navigator.appName.match(/Internet Explorer/) ? a.className="finded_str":
(a.setAttribute('class','finded_str') ||
a.setAttribute('className','finded_str'));
//IE真偉大 可是其他瀏覽器也支援a.className 真不知道我在龜毛什麼
a.appendChild(document.createTextNode(search_str));
target.parentNode.insertBefore(a,target);
}
}
var target_=target.previousSibling;
target.parentNode.removeChild(target);
return target_;
}
function cleanLastSearch(target) { //這是這次新增的函數
var tag=target.firstChild; //很眼熟對吧 與search()一樣用無限迴圈
while(1) { //檢查子節點 但不檢查子節點中的子節點
if((tag.nodeName=="B") &&
(( navigator.appName.match(/Internet Explorer/) ? tag.className :
tag.getAttribute('class') ) == "finded_str")) {
//一切都是為了偉大的IE 和我的龜毛
var a="";
for(i=0;i<tag.childNodes.length;i++) {
if(tag.childNodes[i].nodeName=="#text")
a+=tag.childNodes[i].nodeValue; //將被反白的字全部存到變數a
}
var tag_=tag.parentNode.insertBefore(document.createTextNode(a),tag);
tag.parentNode.removeChild(tag);
tag=tag_;
}
if(tag.nextSibling==null)
return;
else
tag=tag.nextSibling;
}
}
HTML部份:
<div id="wrapper"><!-- for IE6 hack -->
略
<div id="div1">
文章(略)
</div>
</div>
<div id="search_box"><!-- for IE6 hack -->
<input id="search_str" type="text">
<input type="button" value="搜尋 onclick="search(
document.getElementById('div1'),document.getElementById('search_str'));">
</div>
<script>
略
</script>
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 218.172.88.138
1F：推 No:沒有把textNode合併的話，先搜尋"同學"，再搜尋"老同學"會失效 07/09 07:40
2F：→ s25g5d4:這一切都是W3C得陰陰謀啦 這是一個DOM的BUG 就是把換行也 07/09 10:12
3F：→ s25g5d4:當一個節點 07/09 10:12