使用JavaScript更改XML内容，缺少刷新_Javascript_Xml_Dom_Xmldom

使用JavaScript更改XML内容，缺少刷新

javascript xml dom

使用JavaScript更改XML内容，缺少刷新,javascript,xml,dom,xmldom,Javascript,Xml,Dom,Xmldom,我设法使用- wxml = window.open("my_template.xml", "my_xml" ); 我使用- xDoc = wxml.document; xNodes = xExDoc.getElementsByTagName("myNodeName"); xValue = xNodes[i].getElementsByTagName("value")[0]; xValue.firstChild.nodeValue = nodeNewVal; 但我无法在屏幕上看到新的DOM

我设法使用-

wxml = window.open("my_template.xml", "my_xml" );

我使用-

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）：


“名称1”{replaceMe！}
“名称2”{replaceMe！}
“名称1”{replaceMe！}
“名称2”{replaceMe！}
“名称1”{replaceMe！}
“名称2”{replaceMe！}

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>


在外部窗口中打开XML
显示XML（不在屏幕上显示更新的版本）
var-wxml；
var-xDoc；
var xDevices，xInputs；
var xDevice，xInput；
函数fSetXmlAInput（iDevice、iNode、nodeNewVal）{
xInput=xInputs[iNode]；
xValue=xInput.getElementsByTagName（“值”）[0]；
//更改节点值：
//log（“nodeVal:+xValue.firstChild.nodeValue”）；
xValue.firstChild.nodeValue=nodeNewVal；
//log（“newVal:+xValue.firstChild.nodeValue”）；
}
功能fSetXmlDevice（iDevice）{
xDevice=xDevices[iDevice]；
xInputs=xDevice.getElementsByTagName（“输入”）；
fSetXmlAInput（iDevice，0，“22”）；
fSetXmlAInput（iDevice，1，“33”）；
}
函数fshowxmlinternalwin（）{
wxml=window.open（“my_template.xml”、“my_xml”）；
xDoc=wxml.document；
xDevices=xDoc.getElementsByTagName（“设备”）；
fsetxml装置（1）；
返回false；
}

第一次查看时出现以下错误：

Timestamp: 6/5/2013 2:32:11 μμ
Error: ReferenceError: xExDoc is not defined

我没有看到在代码中定义了xExDoc…我只看到了xDoc

更新： 此外，未定义i变量导致另一个错误。此外，您应该使用firebug一步一步地调试代码，或者至少添加一个代码

alert(xNodes.length);

以检查找到了多少标签

更新2：（包括解决方案） 我发现了两种可能的选择：

使用window.openwithdata: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>

第一次查看时出现以下错误：

Timestamp: 6/5/2013 2:32:11 μμ
Error: ReferenceError: xExDoc is not defined

我没有看到在代码中定义了xExDoc…我只看到了xDoc

更新： 此外，未定义i变量导致另一个错误。此外，您应该使用firebug一步一步地调试代码，或者至少添加一个代码

alert(xNodes.length);

以检查找到了多少标签

更新2：（包括解决方案） 我发现了两种可能的选择：

使用window.openwithdata: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>

你说得对。我认为@Atara错误地编写了

xExDoc

而不是

xDoc

。因为@Atara正在通过

xDoc=wxml.document

在打开的文档上获取

myNodeName

。这不是完整的代码。在完整的代码中，我没有语法错误，我将尝试上传一个小样本和整个文档code@Atara我用代码更新了我的答案，允许您重新呈现XML并进行任何更改。@meewoK，谢谢。客户端不接受选项2+3，因为InternetExplorer不支持数据URI。我将尝试调查选项1。@meewoK，我无法在此项目中使用服务器端。我发现编写\更改XML文档会将其还原为HTML文档。我可能最终会在DIV或textarea中编写XML。你说得对。我认为@Atara错误地编写了

xExDoc

而不是

xDoc

。因为@Atara正在通过

xDoc=wxml.document

在打开的文档上获取

myNodeName

。这不是完整的代码。在完整的代码中，我没有语法错误，我将尝试上传一个小样本和整个文档code@Atara我用代码更新了我的答案，允许您重新呈现XML并进行任何更改。@meewoK，谢谢。客户端不接受选项2+3，因为InternetExplorer不支持数据URI。我将尝试调查选项1。@meewoK，我无法在此项目中使用服务器端。我发现编写\更改XML文档会将其还原为HTML文档。我可能会在DIV或textarea中编写我的XML，你能给我们提供XML吗？我希望浏览器的“XML视图”不像“HTML视图”那样具有交互性。您可能需要在HTML和

区域中显示XML。您也可以给我们提供XML吗？我希望浏览器的“XML视图”不像“HTML视图”那样具有交互性。您可能需要在HTML和

区域中显示XML。