迫使IE8一个DOM重新呈现 [英] forcing a dom rerender in ie8
问题描述
我已经尝试了所有的经典，即过关获得我的网页重新呈现已在DOM的，但没有奏效的变化。我已经尝试过
I've tried all of the classic ie tricks to get my webpage to rerender the changes that have been made in the dom but nothing has worked. I've already tried
element.className = element.className;
以及访问我改变了DOM的某些部分，但是这并不能工作。
as well as accessing some part of the dom I changed but that doesn't work either.
下面是我的code。 onload事件来调用queryDB和HTML有id为植物的段落。到目前为止，code只能正常工作在Firefox 3和铬。
Here's my code. Onload the body calls queryDB and in the html there's a paragraph with the id "plants". So far this code only works correctly on firefox 3 and chrome.
var timeout = 5000; //get new plants every 5 seconds
function queryDB() {
responseDoc = getXMLFrom("ajax/getallplants.php");
paragraph = document.getElementById("plants");
table = document.createElement("table");
table.setAttribute("class", "viewTable");
//clean up the last query
cleanUpLastResult(paragraph);
//loop through the responseDoc and dynamically add plants
if(plantsFound(responseDoc)) {
for(i = 0; i < responseDoc.documentElement.childNodes.length; i++) {
currentChild = responseDoc.documentElement.childNodes[i];
row = document.createElement("tr");
//old way of printing where the whole sci name and common name was just text
/*paragraph.appendChild(document.createTextNode(responseDoc.documentElement.childNodes[i].firstChild.nodeValue));
paragraph.appendChild(document.createElement("br"));*/
//newer way of printing where the common name is bolded
/*paragraph.appendChild(document.createTextNode(currentChild.firstChild.nodeValue + " "));
commonName = document.createElement("b");
commonName.appendChild(document.createTextNode(currentChild.getAttribute("commonname")));
paragraph.appendChild(commonName);
paragraph.appendChild(document.createElement("br"));*/
//newest way of printing that prints to a table
col1 = document.createElement("td");
col1.setAttribute("class", "viewTable");
col1.appendChild(document.createTextNode(currentChild.firstChild.nodeValue));
col2 = document.createElement("td");
col2.setAttribute("class", "viewTable");
col2Bold = document.createElement("b");
col2Bold.appendChild(document.createTextNode(currentChild.getAttribute("commonname")));
col2.appendChild(col2Bold);
row.appendChild(col1);
row.appendChild(col2);
table.appendChild(row);
}
paragraph.appendChild(table);
paragraph.className = paragraph.className;
paragraph.firstChild.className = paragraph.firstChild.className;
}
else {
paragraph.appendChild(document.createTextNode("no plants currently entered"));
}
//re-add the callback
setTimeout(queryDB, timeout);
}
function plantsFound(responseDoc) {
if(responseDoc.documentElement == null) {
return false;
}
else {
if(responseDoc.documentElement.firstChild.nodeType == 3) {
//text node so no children
return false;
}
else {
return true;
}
}
}
function cleanUpLastResult(paragraph) {
//old way of cleaning up where everything was only a childnode of the paragraph
/*while(paragraph.childNodes.length >= 1) {
paragraph.removeChild(paragraph.firstChild);
}*/
/* The three possible cases:
* 1 first execution time so paragraph has no child
* 2 nth execution time but nothing was found in db so only a textnode
* 3 nth execution and there's a whole table to clean up
*/
if(paragraph.firstChild == null) {
//nothing there so nothing to delete
}
else if(paragraph.firstChild.nodeValue != null) {
//no table printed, just remove that text node
paragraph.removeChild(paragraph.firstChild);
}
else {
//delete the whole table
table = paragraph.firstChild;
//remove each row
while(table.childNodes.length >= 1) {
//remove the two columns in it and their stuff
row = table.firstChild;
col1 = row.firstChild;
col2 = row.lastChild;
//remove column1 and it's text node
col1.removeChild(col1.firstChild);
row.removeChild(row.firstChild);
//remove column2, it's bold node and its text node
col2.firstChild.removeChild(col2.firstChild.firstChild);
col2.removeChild(col2.firstChild);
row.removeChild(row.firstChild);
table.removeChild(row);
}
//finally delete the table
paragraph.removeChild(paragraph.firstChild);
}
}
function getXMLFrom(url) {
if(window.XMLHttpRequest) {
//regular browser
xmlhttp = new XMLHttpRequest();
}
else {
//ie6
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", url, false);
xmlhttp.send();
responseDoc = xmlhttp.responseDoc;
if(responseDoc == null) {
if(window.XMLHttpRequest && (typeof DOMParser != "undefined")) {
//firefox
var parser = new DOMParser();
responseDoc = parser.parseFromString(xmlhttp.responseText, "text/xml");
}
else {
//ie6 or ie7
var doc = new ActiveXObject("Microsoft.XMLDOM");
doc.async = true;
doc.loadXML(xmlhttp.responseText);
responseDoc = doc;
}
if(responseDoc == null) {
alert("error in parser xml from: " + url);
}
return responseDoc;
}
}
我还测试了responseDoc，我知道我正在从getallplants.php正确的反应，产生各种植物的XML重新presentations。关于如何解决此问题的任何想法？另外，由于种种原因，我不能使用JQuery这一点。
I've also tested the responseDoc and I know I am getting a correct response from getallplants.php which generates an xml representations of various plants. Any ideas on how to fix this? Also, for various reasons I can't use JQuery for this.
修改我有，我发现在另一个SO线程准很好的解决方案。如果我添加的document.write（的document.all [0] .innerHTML）;以queryDB后，我的表中设置我的第一个孩子做。唯一的问题是，如果我这样做的页面不会刷新，每5分钟。因此，如果该数据库更改了页面已被刷新哪一种违背了JavaScript的asynchroniously从数据库中获取信息的目的。
edit I have a quasi-good solution that I found on another SO thread. If I add document.write(document.all[0].innerHTML); to queryDB after I set the table I made to a child of the paragraph. The only problem is that if I do this the page won't refresh every 5 minutes. So if the database it changed this page has to be refreshed which kind of defeats the purpose of having javascript asynchroniously get info from the database.
推荐答案
我有一个类似的问题，在几个星期前，并添加一个类来在体元素制成的伎俩。所添加的类可以只之后除去。
I had a similar issue, a few weeks ago, and adding a class to the body element made the trick. The added class can be removed just after.
这篇关于迫使IE8一个DOM重新呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
