使用JavaScript更改XML内容,缺少刷新
Change XML content using JavaScript, missing refresh
我设法使用-
显示XMLwxml = window.open("my_template.xml", "my_xml" );
我设法改变DOM使用-
xDoc = wxml.document;
xNodes = xExDoc.getElementsByTagName("myNodeName");
xValue = xNodes[i].getElementsByTagName("value")[0];
xValue.firstChild.nodeValue = nodeNewVal;
但是我无法在屏幕上看到新的DOM值
如何强制"刷新屏幕的DOM"
注意:reload()没有帮助,因为它加载的是原始页面,而我想看到的是DOM改变后的页面。
编辑-我使用的代码:
XML文件(my_template.xml):<myXmlRoot>
<device>
<input><name>"name 1"</name><value>{replaceMe!}</value></input>
<input><name>"name 2"</name><value>{replaceMe!}</value></input>
</device>
<device>
<input><name>"name 1"</name><value>{replaceMe!}</value></input>
<input><name>"name 2"</name><value>{replaceMe!}</value></input>
</device>
<device>
<input><name>"name 1"</name><value>{replaceMe!}</value></input>
<input><name>"name 2"</name><value>{replaceMe!}</value></input>
</device>
</myXmlRoot>
HTML文件:<html>
<head>
<title>Open XML in External Window</title>
</head>
<body>
<button onClick="fShowXmlInExternalWin()">Show XML </button> (does not show the updated version on the screen)
<script type="text/javascript" >
var wxml;
var xDoc;
var xDevices, xInputs;
var xDevice, xInput;
function fSetXmlAInput(iDevice, iNode, nodeNewVal) {
xInput = xInputs[iNode];
xValue = xInput.getElementsByTagName("value")[0];
// change node value:
// console.log("nodeVal: " + xValue.firstChild.nodeValue);
xValue.firstChild.nodeValue = nodeNewVal;
// console.log("newVal: " + xValue.firstChild.nodeValue);
}
function fSetXmlDevice(iDevice) {
xDevice = xDevices[iDevice];
xInputs = xDevice.getElementsByTagName("input");
fSetXmlAInput(iDevice, 0, "22");
fSetXmlAInput(iDevice, 1, "33");
}
function fShowXmlInExternalWin() {
wxml = window.open("my_template.xml", "my_xml" );
xDoc = wxml.document;
xDevices = xDoc.getElementsByTagName("device");
fSetXmlDevice(1);
return false;
}
</script>
</body>
</html>
第一次查看时出现以下错误:
Timestamp: 6/5/2013 2:32:11 μμ
Error: ReferenceError: xExDoc is not defined
我没有看到xExDoc定义在你的代码某处…我只看到xDoc。
更新:
另外,变量i没有定义,导致另一个错误。此外,应该使用firebug一步一步地调试代码,或者至少添加
alert(xNodes.length);
,以便检查找到了多少个标签。
更新2:(包含解决方案)
我发现了两个可能的选择:
- 使用窗口。open with data:text/xml直接呈现修改后的xml。
- 使用appendChild和removeChild强制对XML DOM进行重大更改,并使浏览器重新刷新页面。
选项1保持XML浏览器格式完整,而选项2导致浏览器不再将XML视为XML内容,并且格式丢失。
代码如下:
<html>
<head>
<title>Open XML in External Window</title>
</head>
<body>
<button onClick="fShowXmlInExternalWin()">Show XML </button> (shows updated on the screen but loses XML formatting)<br/>
<button onClick="alternativeLoadXML()">Alternative Show XML </button> (shows updated XML, as XML is loaded - changed, and XML is rendered)<br/>
<button onClick="alternativeLoadXML2()">Alternative Show XML 2 </button> (open window with original XML, change XML model, reload window)<br/>
<script type="text/javascript" >
var wxml;
var xDoc;
var xDevices, xInputs;
var xDevice, xInput;
function fSetXmlAInput(iDevice, iNode, nodeNewVal) {
xInput = xInputs[iNode];
xValue = xInput.getElementsByTagName("value")[0];
// change node value:
// console.log("nodeVal: " + xValue.firstChild.nodeValue);
xValue.firstChild.nodeValue = nodeNewVal;
// console.log("newVal: " + xValue.firstChild.nodeValue);
}
function fSetXmlDevice(iDevice) {
xDevice = xDevices[iDevice];
xInputs = xDevice.getElementsByTagName("input");
fSetXmlAInput(iDevice, 0, "22");
fSetXmlAInput(iDevice, 1, "33");
}
function fShowXmlInExternalWin() {
wxml = window.open("my_template.xml", "my_xml" );
//Delay 500ms for window to load first
window.setTimeout("triggerWindow()",500);
return false;
}
//Further options Below
//First option, trigger refresh with append and remove - loses formatting
function triggerWindow()
{
xDoc = wxml.document;
xDevices = xDoc.getElementsByTagName("device");
fSetXmlDevice(1);
//Add and remove element to trigger referesh
var p = document.createElement("test");
xDoc.firstChild.appendChild(p);
xDoc.firstChild.removeChild(p);
}
function alternativeLoadXML()
{
// load xml file
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else { // IE 5/6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET", "my_template.xml", false);
xhttp.send();
xDoc = xhttp.responseXML;
xDevices = xDoc.getElementsByTagName("device");
fSetXmlDevice(1);
var xmlText = new XMLSerializer().serializeToString(xDoc);
window.open('data:text/xml,' + xmlText);
}
//Second option, open window, change XML, reload window with custom xml address
function triggerWindow2()
{
xDoc = wxml.document;
xDevices = xDoc.getElementsByTagName("device");
fSetXmlDevice(1);
var xmlText = new XMLSerializer().serializeToString(xDoc);
window.open('data:text/xml,' + xmlText, "my_xml");
}
function alternativeLoadXML2()
{
wxml = window.open("my_template.xml", "my_xml" );
//Delay 500ms for window to load first
window.setTimeout("triggerWindow2()",500);
}
</script>
</body>
</html>
更新3:使用文档。打开并归档。写在新窗口上的工作在IE中输出正确的XML,但XML渲染是关闭的-似乎渲染内容为HTML…
function alternativeLoadXML3() {
// load xml file
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else { // IE 5/6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET", "my_template.xml", false);
xhttp.send();
xDoc = xhttp.responseXML;
xDevices = xDoc.getElementsByTagName("device");
fSetXmlDevice(1);
var xmlText = serializeXmlNode(xDoc);
var newWindow = window.open("my_template.xml", "Test", "width=300,height=300,scrollbars=1,resizable=1");
newWindow.document.open();
newWindow.document.write(xmlText);
newWindow.document.close()
};
相关文章:
- 如何刷新列表框内容onclick或blur事件
- 刷新潜水内容不起作用
- 如何在javascript中刷新变量的内容
- 自动刷新使用javascript的rails 3.2页面内容
- 弹出窗口中的内容不会刷新.如何使动态
- 在内容刷新或更新时调整iframe的大小
- 自动刷新潜水内容
- 如何在不刷新页面的情况下每次单击一组选项卡时刷新视图内容窗格
- 刷新内容 jQuery
- 当至少有一个用户触发事件而不刷新页面时,更改所有用户页面中的内容
- 自动刷新内容,但如果关注此内容中的某个输入,则不刷新
- 从数组中添加图像,在循环完成之前不会刷新内容
- 刷新内容后编译剑道窗口
- 如何防止 Javascript 更新整个控件和刷新内容
- 单击链接不会刷新内容
- AJAX保持刷新内容,使我的按钮无用
- 如何在NanoGallery jQuery插件中刷新内容
- 使用JS刷新内容时涉及的风险
- 如何在不重新加载页面的情况下刷新内容
- 如何在更新后刷新内容 .Net C# (EXT.net) Web 窗体应用程序