的后续

Question

我有一个相当简单的要求，我正在尝试实施：

构建XMLHttpRequest以加载其他页面
遍历其他页面中head元素中的内容
对于找到的每个元素，将其附加到当前（调用）页面中的head元素

我发现非常奇怪和令人困惑的是，另一页head中的某些预期元素缺失。但是，一旦我删除了将每个找到的元素附加到调用页面的单行代码，另一页head中的所有子元素都会神奇地出现。

例如，假设其他页面应包含2个meta元素，3个link元素和4个script元素。出于某种原因，我的XMLHttpRequest对象的responseXML只返回1个meta元素，1个link元素和3个script元素。

下面是我真正想要执行的代码行。但是当我在HTML源代码中使用它时，head中的一些responseXML个孩子会丢失。您可以在 this bin 或this Visualforce page上看到它。

head.appendChild(header.head.children[i]);

下面显示了相同的代码注释掉了。当我这样做时，失踪的孩子重新出现。您可以在 this bin 或this Visualforce page上看到它。

//head.appendChild(header.head.children[i]);

是什么导致子元素消失？如果您打开JavaScript控制台（Chrome）或Web控制台（Firefox），您可以非常清楚地看到加载上述两个页面的区别。< / p>

Answer 1

我仍然对为什么发生的真实问题的答案感到好奇。我有一些想法，但首先是：将您的合并代码更改为以下代码段。

  Communities.mergeHeader = function(header) {
    console.log("header: %o", header);

    var head = document.getElementsByTagName("head")[0];
    head.innerHTML = header.head.outerHTML;
  };

我会跟进关于原因的想法。

的后续

DEMO

确定。得到完全侧面跟踪。你看到那些节点＆＃34;消失的原因＆＃34;是因为你实际上取代了它们：

<强> JS 这里我们做移动代码

var list = document.getElementById('list'),
    btn = document.getElementById('btn');

document.head.appendChild(list);

之前

html

<ul id='list'>
  <li>Have</li>
  <li>you</li>
  <li>ever</li>
  <li>needed</li>
  <li>to</li>
  <li>keep</li>
  <li>a</li>
  <li>list</li>
  <li>in</li>
  <li>your</li>
  <li>head?</li>
</ul>

<p>Now you can:
  <button id='btn'>List -> Head</button>
</p>

之后

html2

头元素

移动后

你可以看到尸体遗漏了这个清单。

<head>
    <meta charset="UTF-8">
    <meta name="robots" content="noindex">
    <link rel="canonical" href="http://codepen.io/presstep/pen/a385456d87e7f2c084dc338c1d885c09/?editors=101">
    <style class="cp-pen-styles">
        body {
          font: 300 25px/1 sans-serif;
        }
        ul {
          list-style-type: square;
        }
        p {
          font-size: 14px;
        }
    </style>
    <ul id="list">
        <li>Have</li>
        <li>you</li>
        <li>ever</li>
        <li>needed</li>
        <li>to</li>
        <li>keep</li>
        <li>a</li>
        <li>list</li>
        <li>in</li>
        <li>your</li>
        <li>head?</li>
    </ul>
</head>
<body>
  <p>Now you can:
    <button id='btn'>List -> Head</button>
  </p>
</body>

尝试附加到文档时，headXML在responseXML中丢失

1 个答案:

的后续

DEMO