作者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