【速记】React解决IE浏览器svg标签不支持innerHTML操作的问题及相关拓展知识
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 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 nodeif (node.namespaceURI === Namespaces.svg && !('innerHTML' in node)) {reusableSVGContainer =reusableSVGContainer || document.createElement('div');reusableSVGContainer.innerHTML = '<svg>' + html + '</svg>';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 : https://msdn.microsoft.com/zh...
The new Windows 10 security model for HTML/Javascript apps. : https://github.com/MicrosoftE...
关于IE浏览器无法一些元素无法设置innerHTML属性的解决方案和原因:
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 = '<table>' + html + '</table>';tbody.parentNode.replaceChild(temp.firstChild.firstChild, tbody);
}
【速记】React解决IE浏览器svg标签不支持innerHTML操作的问题及相关拓展知识相关推荐
- 解决微信浏览器video标签自动播放视频失效
正常在浏览器好好的视频,在微信内置浏览器中点击播放全屏,样式也不一样,自动播放失效.罪魁祸首是微信把video标签都成微信规则的了.下面方式可以解决视频播放全屏以及不能自动播放的问题. <vid ...
- svg js动态生成svg标签
1.声明svg命名空间let xx="http://www.w3.org/2000/svg";2.创建svg标签let x=document.createElementNS(xx, ...
- 使用selenium解决svg标签定位问题
使用正常的定位方式无法识别到svg标签: 解决方法: //div[@class="ant-table-tbody"]/[name()="svg"]/[name( ...
- svg标签和svg文件区别_什么是SVG文件? SVG图片和标签说明
svg标签和svg文件区别 SVG (SVG) SVG or Scalable Vector Graphics is a web standard for defining vector-based ...
- mac下chrome浏览器的标签页、进程和内存分配
因为最近要解决网页经常崩溃的问题,所以去研究了一下chrome浏览器的标签页和进程的关系,以及标签页对应进程的内存分配. 标签页和进程的对应关系 当chrome浏览器开启但是没有任何一个标签页的时候, ...
- ios开发跳转safari_阻止iOS Web APP中点击链接跳转到Safari 浏览器新标签页
最近为了更好地接触移动Web 开发狠心购买了一台ipad mini(之前一直都是借同学的,借多了就不好意思了).拿来调试DeveMobile 与EaseMobile 主题 时候发现了不少问题,现在在一 ...
- [html] 如何解决微信浏览器视频点击自动全屏的问题?
[html] 如何解决微信浏览器视频点击自动全屏的问题? 1.1 页面内播放 X5内核视频在用户点击后默认会进入全屏播放,前端可以设置video的x5-playsinline属性来将视频限定于网页内部 ...
- 一行代码解决ie浏览器的兼容
x-ua-compatible 头标签大小写不敏感,必须用在 head 中,必须在除 title 外的其他 meta 之前使用. 1.使用一行代码来指定浏览器使用特定的文档模式. <meta h ...
- html svg标签中插入img image标签不显示的问题
svg标签中插入img image标签(图片)不显示的问题 1 问题: 在使用svg画图中想要使用img标签插入图片,可以图片不显示 <!--S svg外框 --> <div cla ...
最新文章
- 官宣!VS Code Python 全新功能在 PyCon China 全球首发!
- 转载:配置nginx支持pathinfo功能
- python if语句多个条件-python – if / elif语句的多个条件
- 永洪科技携手华为构建金融智慧运营与商业智能方案,解决金融敏捷分析难题
- Visual Studio 2008 响应很慢 是怎么回事?
- python执行sqlserver存储过程_python – 从SqlAlchemy调用MSSQL存储过程
- Oracle入门(十二J)之同义词
- 超9000万LoRa节点,全球物联网的事实标准已形成?
- 优秀的程序员是如何诞生的?
- 31. Next Permutation
- 人工智能算法自动化测试_自动化:算法如何塑造我和你的生活
- Phantomjs 生成多页PDF
- ×××全功能邮件系统(3)
- CRM 安装不规范,亲人两行泪
- 【Java】QuickHit游戏
- SATA硬盘分区设置与安装详解
- 一个小白程序员的目标
- python hist2d_具有二维数组的Python Matplotlib Hist2d
- Leetcode(347)——前 K 个高频元素
- 计算机程序框图符号,数据流程图符号详解
热门文章
- java 麻将的发牌与洗牌_JAVA程序设计(11)-----面对对象初级设计 麻将 创建麻将牌 然后洗牌 发牌~ 恩 就这样...
- 自由职业为何会崛起成为一股暗潮?
- 2021年3月8日:MyBatis框架学习笔记02:利用MyBatis实现CRUD操作
- 宇视网络视频录像机国标对接配置指导
- OSM地图本地发布(三)-----自定义图层提取
- 计算机双代号网络图,双代号网络图计算机自动绘制研究.pdf
- antd Card组件默认选中
- Ubuntu下Logi MX Ergo自定义按键
- 海贼王热血航线服务器维护,《航海王热血航线》游戏进不去如何解决 维护中快速解决办法...
- 工业智能网关BL110应用之59:如何实现智能楼宇控制BACnet 接入MQTT Client One云平台