【速记】React解决IE浏览器svg标签不支持innerHTML操作的问题及相关拓展知识

摘要：代码资料文件文件文件关于系列的的网页的操作需要权限的相关文档关于浏览器无法一些元素无法设置属性的解决方案和原因

文件：packages/react-dom/src/client/setInnerHTML.js

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import {Namespaces} from "../shared/DOMNamespaces";
import createMicrosoftUnsafeLocalFunction from "../shared/createMicrosoftUnsafeLocalFunction";

// SVG temp container for IE lacking innerHTML
let reusableSVGContainer;

/**
 * Set the innerHTML property of a node
 *
 * @param {DOMElement} node
 * @param {string} html
 * @internal
 */
const setInnerHTML = createMicrosoftUnsafeLocalFunction(function(
  node: Element,
  html: string,
): void {
  // IE does not have innerHTML for SVG nodes, so instead we inject the
  // new markup in a temp node and then move the child nodes across into
  // the target node

  if (node.namespaceURI === Namespaces.svg && !("innerHTML" in node)) {
    reusableSVGContainer =
      reusableSVGContainer || document.createElement("div");
    reusableSVGContainer.innerHTML = "";
    const svgNode = reusableSVGContainer.firstChild;
    while (node.firstChild) {
      node.removeChild(node.firstChild);
    }
    while (svgNode.firstChild) {
      node.appendChild(svgNode.firstChild);
    }
  } else {
    node.innerHTML = html;
  }
});

export default setInnerHTML;

文件：packages/react-dom/src/shared/createMicrosoftUnsafeLocalFunction.js

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

/* globals MSApp */

/**
 * Create a function which has "unsafe" privileges (required by windows8 apps)
 */
const createMicrosoftUnsafeLocalFunction = function(func) {
  if (typeof MSApp !== "undefined" && MSApp.execUnsafeLocalFunction) {
    return function(arg0, arg1, arg2, arg3) {
      MSApp.execUnsafeLocalFunction(function() {
        return func(arg0, arg1, arg2, arg3);
      });
    };
  } else {
    return func;
  }
};

export default createMicrosoftUnsafeLocalFunction;

文件：packages/react-dom/src/shared/DOMNamespaces.js

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

const HTML_NAMESPACE = "http://www.w3.org/1999/xhtml";
const MATH_NAMESPACE = "http://www.w3.org/1998/Math/MathML";
const SVG_NAMESPACE = "http://www.w3.org/2000/svg";

export const Namespaces = {
  html: HTML_NAMESPACE,
  mathml: MATH_NAMESPACE,
  svg: SVG_NAMESPACE,
};

execUnsafeLocalFunction method : https://msdn.microsoft.com/zh...

The new Windows 10 security model for HTML/Javascript apps. : https://github.com/MicrosoftE...

https://stackoverflow.com/que...

The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HEAD, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR.

function setTBodyInnerHTML(tbody, html) {
  var temp = tbody.ownerDocument.createElement("div");
  temp.innerHTML = "" + html + "";

  tbody.parentNode.replaceChild(temp.firstChild.firstChild, tbody);
}