如何使用JS在chrome浏览器上解析xml并输出到html表单字段?我的脚本工作在微软ie。XML显示为打印的源文件"http_myxml.xml"从JS输出到"document.display">
<?xml version = "1.0" ?>
<record>
<c_date>2022-11-21 07:22:10</cx_date>
<ev1_sup>1.22</ev1_sup>
</record>
var xml_data_URL="http_myxml.xml";
var Polling;
var Ptr411Name="c_date";
var Ptr52901Name="ev1_sup";
var xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = true;
function GetData()
{
if(xml.readyState==4) // Is the load completed?
{
xml.load(xml_data_URL);
Polling = true;
}
setTimeout("GetData()",16000);
}
function DisplayData()
{
var xmlElements;
var svgElement;
// Check for XML file update
if(!Polling) return;
if(xml.readyState==4) // Is the load completed?
{
Polling = false;
var err = xml.parseError;
if (err.errorCode == 0)
{
// update form fields
xmlElements = xml.getElementsByTagName(Ptr411Name);
document.display.c_date.value=xmlElements.item(0).text;
xmlElements = xml.getElementsByTagName(Ptr52901Name);
document.display.ev1_sup.value=xmlElements.item(0).text;
if(xmlElements.item(0).text == 0)
window.status = "x";
}
else
{
alert("advice: xml data load timed out: "+err.reason);
}
}
setTimeout("DisplayData()",8000);
}
<html>
<form action="" name="display" method="post"><input class="o" size="26" readonly name="c_date"><input class="o" size="26" readonly name="ev1_sup"></form>
</html>
此代码适用于ie，浏览器在相应的html表单字段中显示xmlelement数据c_date和ev1_sup。如何使这个工作Chrome?
示例1
在这个例子中，我加载XML文档:
<?xml version="1.0" encoding="UTF-8"?>
<fields>
<field type="text" name="title"/>
<field type="text" name="description"/>
</fields>
var xml_data_URL = 'data:application/xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPGZpZWxkcz4KPGZpZWxkIHR5cGU9InRleHQiIG5hbWU9InRpdGxlIi8+CjxmaWVsZCB0eXBlPSJ0ZXh0IiBuYW1lPSJkZXNjcmlwdGlvbiIvPgo8L2ZpZWxkcz4=';
document.addEventListener('DOMContentLoaded', e => {
fetch(xml_data_URL).then(res => res.text()).then(text => {
let parser = new DOMParser();
let xmlDoc = parser.parseFromString(text, "application/xml");
[...xmlDoc.documentElement.children].forEach(node => {
let type = node.getAttribute('typw');
let name = node.getAttribute('name');
document.forms.form01.innerHTML += `<label>${name}: <input type="${type}"
name="${name}"></label>`;
});
});
});<form name="form01"></form>基于XML文档:
<?xml version="1.0" encoding="UTF-8"?>
<record>
<c_date>2022-11-21 07:22:10</c_date>
<ev1_sup>1.22</ev1_sup>
</record>
下一个示例是循环XML文档的子元素。对于每个元素，它选择具有相同名称的表单元素，并插入textContent。
var xml_data_URL = 'data:application/xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHJlY29yZD4KPGNfZGF0ZT4yMDIyLTExLTIxIDA3OjIyOjEwPC9jX2RhdGU+CjxldjFfc3VwPjEuMjI8L2V2MV9zdXA+CjwvcmVjb3JkPg==';
document.addEventListener('DOMContentLoaded', e => {
fetch(xml_data_URL).then(res => res.text()).then(text => {
let parser = new DOMParser();
let xmlDoc = parser.parseFromString(text, "application/xml");
[...xmlDoc.documentElement.children].forEach(node => {
document.forms.display[node.nodeName].value = node.textContent;
});
});
});<form action="" name="display" method="post">
<input type="text" class="o" size="26" readonly name="c_date">
<input type="text" class="o" size="26" readonly name="ev1_sup">
</form>