使用JavaScript更改XML内容，缺少刷新 [英] Change XML content using JavaScript, missing refresh

查看：140
本文介绍了使用JavaScript更改XML内容，缺少刷新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我设法使用 - 

  wxml = window.open（my_template.xml，my_xml）显示XML ;

我设法使用 - 

  xDoc = wxml.document; 
 xNodes = xExDoc.getElementsByTagName（myNodeName）; 
 xValue = xNodes [i] .getElementsByTagName（value）[0]; 
 xValue.firstChild.nodeValue = nodeNewVal;

但我没有设法在屏幕上看到新的DOM值。 >



如何强制通过DOM刷新屏幕？



注意：reload（）将无法帮助，因为它加载原始页面，我想看到具有DOM更改的页面。



编辑 - 我使用的代码： / p>

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>在外部窗口中打开XML< / title> 
< / head> 
< body> 
 
< button onClick =fShowXmlInExternalWin（）>显示XML< / button> （不显示屏幕上的更新版本）
 
< script type =text / javascript> 
 
 var wxml; 
 var xDoc; 
 var xDevices，xInputs; 
 var xDevice，xInput; 
 
函数fSetXmlAInput（iDevice，iNode，nodeNewVal）{
 xInput = xInputs [iNode]; 
 xValue = xInput.getElementsByTagName（value）[0]; 
 
 //更改节点值：
 // console.log（nodeVal：+ xValue.firstChild.nodeValue）; 
 xValue.firstChild.nodeValue = nodeNewVal; 
 // console.log（newVal：+ xValue.firstChild.nodeValue）; 
} 
 
函数fSetXmlDevice（iDevice）{
 xDevice = xDevices [iDevice]; 
 xInputs = xDevice.getElementsByTagName（input）; 
 fSetXmlAInput（iDevice，0，22）; 
 fSetXmlAInput（iDevice，1，33）; 
} 
 
函数fShowXmlInExternalWin（）{
 wxml = window.open（my_template.xml，my_xml）; 
 xDoc = wxml.document; 
 xDevices = xDoc.getElementsByTagName（device）; 
 fSetXmlDevice（1）; 
返回false; 
} 
 
< / script> 
 
< / body> 
< / html>


解决方案

在第一个视图中，您有以下错误： p> 

  Timestamp：6/5/2013 2:32:11μμ
错误：ReferenceError：xExDoc未定义

我没有看到xExDoc定义在你的代码的某个地方...我只看到xDoc。



更新：



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

  alert（xNodes。长度）;

以查看找到多少个标签。



更新2：（包含解决方案）



我发现了两个可能的选项：


  1. 使用一个window.open与data：text / xml直接呈现修改的XML。

  2. 使用appendChild和removeChild强制显示更改为XML DOM和浏览器以重新排列页面。

选项1保持XML浏览器格式不变，而选项2会导致浏览器将XML视为不是xml内容，格式丢失。



代码如下：

 < HTML> 
< head> 
< title>在外部窗口中打开XML< / title> 
< / head> 
< body> 
 
< button onClick =fShowXmlInExternalWin（）>显示XML< / button> （显示在屏幕上更新，但丢失XML格式）< br /> 
< button onClick =alternativeLoadXML（）>备用显示XML< / button> （显示已更新的XML，XML已加载 - 已更改，XML已呈现）< br /> 
< button onClick =alternativeLoadXML2（）>备用显示XML 2< / button> （使用原始XML打开窗口，更改XML模型，重新加载窗口）< br /> 
 
< script type =text / javascript> 
 
 var wxml; 
 var xDoc; 
 var xDevices，xInputs; 
 var xDevice，xInput; 
 
函数fSetXmlAInput（iDevice，iNode，nodeNewVal）{
 xInput = xInputs [iNode]; 
 xValue = xInput.getElementsByTagName（value）[0]; 
 
 //更改节点值：
 // console.log（nodeVal：+ xValue.firstChild.nodeValue）; 
 xValue.firstChild.nodeValue = nodeNewVal; 
 // console.log（newVal：+ xValue.firstChild.nodeValue）; 
} 
 
函数fSetXmlDevice（iDevice）{
 xDevice = xDevices [iDevice]; 
 xInputs = xDevice.getElementsByTagName（input）; 
 fSetXmlAInput（iDevice，0，22）; 
 fSetXmlAInput（iDevice，1，33）; 
} 
 
函数fShowXmlInExternalWin（）{
 wxml = window.open（my_template.xml，my_xml）; 
 //延迟500ms窗口加载首先
 window.setTimeout（triggerWindow（），500）; 
返回false; 
} 
 
 //其他选项低于
 
 //第一个选项，触发刷新附加和删除 - 失去格式
 
函数triggerWindow （）
 {
 xDoc = wxml.document; 
 xDevices = xDoc.getElementsByTagName（device）; 
 fSetXmlDevice（1）; 
 
 //添加和删除元素以触发referesh 
 var p = document.createElement（test）; 
 xDoc.firstChild.appendChild（p）; 
 xDoc.firstChild.removeChild（p）; 
} 
 
 function alternativeLoadXML（）
 {
 //加载xml文件
 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）; 
} 
 
 
 //第二个选项，打开窗口，更改XML，使用自定义xml地址重新加载窗口
 
 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）; 
 //延迟500ms窗口以加载
 window.setTimeout（triggerWindow2（），500）; 
} 
 
< / script> 
 
< / body> 
< / html>



更新3：



使用文档。在新窗口中打开和document.write可以在IE中输出正确的XML，但是XML渲染是关闭的 - 似乎将内容呈现为HTML ... 

  function alternativeLoadXML3（）{
 //加载xml文件
 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（）
};


I manage to show XML using -

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

I manage to change the DOM using -

xDoc = wxml.document;
xNodes = xExDoc.getElementsByTagName("myNodeName");  
xValue = xNodes[i].getElementsByTagName("value")[0];
xValue.firstChild.nodeValue = nodeNewVal;

But I do not manage to see the new DOM values on the screen.

How can I force "Refresh screen by DOM" ?

Note: reload() would not help, because it loads the original page, and I want to see the page with the DOM changes.

Edit - the code I use:

XML file (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 file:

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

解决方案

On first view you have the following error:

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

I don't see xExDoc defined somewhere in your code...I only see xDoc.

Update:

In addition, your i variable is not defined causing another error. Also, you should use firebug to debug the code step by step or as a minimum add 

alert(xNodes.length);

in order to check how many tags are found.

Update 2: (includes solution)

I've found two possible options:

  1. Use a window.open with data:text/xml to render the modified XML directly.
  2. Use appendChild and removeChild to force a significant change to the XML DOM and the browser to referesh the page.

Option 1 keeps XML browser formatting intact while option 2 causes the browser to view the XML as not xml content any more and the formatting is lost.

Code is below:

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

Update 3:

Using document.open and document.write on the new window works in IE to output the correct XML but the XML rendering is off - seems to render the content as 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()
    };

这篇关于使用JavaScript更改XML内容，缺少刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆