博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【速记】React解决IE浏览器svg标签不支持innerHTML操作的问题及相关拓展知识
阅读量:5783 次
发布时间:2019-06-18

本文共 3125 字,大约阅读时间需要 10 分钟。

react代码资料:

文件: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 innerHTMLlet 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 = '
' + html + '
'; 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,};

关于Windows8系列的APP的网页的innerHTML操作需要权限的相关文档:

execUnsafeLocalFunction method :

The new Windows 10 security model for HTML/Javascript apps. :


关于IE浏览器无法一些元素无法设置innerHTML属性的解决方案和原因:

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);}

转载地址:http://fijyx.baihongyu.com/

你可能感兴趣的文章
ASP.NET CORE Linux发布工具(文件对比 只上传差异文件;自动启停WebServer命令;上传完成自动预热WebServer)...
查看>>
再次学习mysql优化
查看>>
appium+python自动化56-微信小程序自动化(摩拜为例)
查看>>
json字符串、json对象、数组 三者之间的转换
查看>>
nginx-vod-module && docker && docker-compose 测试
查看>>
C++ 并发编程,std::unique_lock与std::lock_guard区别示例
查看>>
BZOj1261: [SCOI2006]zh_tree(dp)
查看>>
CSS学习(二)ASP.NET实现带当前标识的横向导航
查看>>
nand flash 原理简介
查看>>
用C#和正则表达式截取html代码
查看>>
Sticky Footer , fixed footer, pinned footer
查看>>
asp.net 操作Excel大全
查看>>
5个很好用的.net 分析工具
查看>>
由 char()函数返回的 ASCII字符集中的功能/控制字符
查看>>
android 菜单事件处理
查看>>
数学之路(3)-机器学习(3)-机器学习算法-贝叶斯定理(1)
查看>>
jasperreport 通过javabean datasoource实现chart的报表
查看>>
(转) 发布或重启线上服务时抖动问题解决方案
查看>>
SQL Server 权限管理
查看>>
有趣的换零钱问题
查看>>