javascript - 为什么 innerHTML 在 Android 浏览器中返回 undefined？

Question

我有以下 xml 结构:

<Order>
  <Mats>
    <mat>
      <item size="0.5">
        <imgsrc>sometext</imgsrc>
        <size>sometext</size>
        <cpu>0</cpu>
        <cid>4208</cid>
        <id/>
      </item>
    </mat>
    <mat>
      <item size="0.5">
        <imgsrc>sometext</imgsrc>
        <size>sometext</size>
        <cpu>0</cpu>
        <cid>4208</cid>
        <id/>
      </item>
    </mat>
    <mat>
      <item size="0.5">
        <imgsrc>sometext</imgsrc>
        <size>sometext</size>
        <cpu>0</cpu>
        <cid>4208</cid>
        <id/>
      </item>
    </mat>
    <mat>
      <item size="0.5">
        <imgsrc>sometext</imgsrc>
        <size>sometext</size>
        <cpu>0</cpu>
        <cid>4208</cid>
        <id/>
      </item>
    </mat>
  </Mats>
</Order>

这是我的 javascript 代码:

mattes_number_layers = 4;
var parser = new DOMParser(); //create a new DOMParser
var doc = parser.parseFromString(mattes_get_mattes_xml(), "application/xml"); //convert the string to xml
var top_layer_xml = "<mat>" + doc.getElementsByTagName('mat')[(mattes_number_layers - 2)].innerHTML + "</mat>"; //gets the data for the top layer
alert(top_layer_xml);

mattes_get_mattes_xml() =

<Mats selected_type="" selected_design=""><mat><item size="0"><imgsrc>11852997eab43ff5c7b1803692bee608</imgsrc><size>0</size><cpu>20</cpu><cid>4208</cid><id/></item><fillet index="0"/></mat><mat><item size="0.5"><imgsrc>579767cea6941301e6f91d43580a1948</imgsrc><size>0.5</size><cpu>0</cpu><cid>4390</cid><id/></item><fillet index="1"/></mat><mat><item size="0.5"><imgsrc>11852997eab43ff5c7b1803692bee608</imgsrc><size>0.5</size><cpu>0</cpu><cid>4208</cid><id/></item><fillet index="3"/></mat></Mats>

在 chrome 中，警报结果为:

<mat><item size="0.5"><imgsrc>sometext</imgsrc><size>0.5</size><cpu>0</cpu><cid>4208</cid><id/></item></mat>

在 Android 平板电脑的默认浏览器中(默认浏览器 Android 4.1.1 型号 Prestige 7G):

<mat>undefined</mat>

Answer 1

我用我创建的函数替换了 .innerHTML:

function common_get_inner_html(element)
{
  //console.log(element);
  element = element.childNodes;

  var xml_serializer = new XMLSerializer();
  var inner_html = "";
  //console.log(element.length);
  for (i = 0; i < element.length; ++i)
  {
    //console.log(element[i]);
    inner_html += xml_serializer.serializeToString(element[i]);
  }
  //console.log("inner_html: " + inner_html);
  return inner_html;
}

并这样调用它:

var top_layer_xml = "<mat>" + common_get_inner_html(doc.getElementsByTagName('mat')[(mattes_number_layers - 2)]) + "</mat>"; //gets the data for the top layer

然后设置 innerhtml 我这样做了:

function common_set_inner_html(element, xml_array)
{
  while (element.firstChild)
  {
    element.removeChild(element.firstChild);
  }

  var parser = new DOMParser(); //create a new DOMParser
  for (i = 0; i < xml_array.length; i++)
  {
    var doc = parser.parseFromString(xml_array[i], "application/xml"); //convert the string to xml
    element.appendChild(element.ownerDocument.importNode(doc.documentElement, true));
  }
  return element;
}

并这样调用它:

common_set_inner_html(doc.getElementsByTagName('mat')[(mattes_number_layers - 2)], new Array("<item size='" + size/ppi + "'><imgsrc>" + mattes_replace_default_matte_source($(el).find("imgsrc").first().text()) + "</imgsrc><size>" + size/ppi + "</size><cpu>" + cpu + "</cpu><cid>" + cid + "</cid><id/></item>", "<fillet index='" + (mattes_number_layers - 2) + "'></fillet>")); //puts the last added layer into the xml

然后添加最后一个元素:

function common_append_node(element, xml_string)
{
  var parser = new DOMParser(); //create a new DOMParser
  var doc = parser.parseFromString(xml_string, "application/xml"); //convert the string to xml
  element.appendChild(element.ownerDocument.importNode(doc.documentElement, true));
  return element;
}

我这样调用它:

common_append_node(doc.getElementsByTagName('Mats')[0], top_layer_xml);