javascript - 如何从 javascript 检测 MathML 标签支持 (<mfrac>,<mtable>)？

Question

我可以通过以下方式检测 MathML 支持:

var e = document.createElement('div');
    e.innerHTML = '<math></math>';
    var mathMLSupported = e.firstChild && "namespaceURI" in e.firstChild && e.firstChild.namespaceURI == 'http://www.w3.org/1998/Math/MathML';

但是如何检测对 <mfrac> 的支持和<mtable> ？

Answer 1

使用Element#getBoundingClientRect

function hasMathMLSupport() {
  const div = document.createElement("div");
  div.innerHTML = '<math><mfrac><mn>1</mn><mn>2</mn></mfrac></math>' +
                  '<math><mn>1</mn></math>';
  document.body.appendChild(div);
  return div.firstElementChild.firstElementChild.getBoundingClientRect().height > div.lastElementChild.firstElementChild.getBoundingClientRect().height + 1;
}

console.log(hasMathMLSupport());

使用window.getCompulatedStyle

(在小米浏览器的夜间模式下不起作用，因为它会将颜色更改为 rgba(255, 255, 255, 0.5))

function hasMathMLSupport() {
  const div = document.createElement("div");
  div.innerHTML = '<math><mrow mathcolor=\"red\"><mn>1</mn></mrow></math>';
  document.body.appendChild(div);
  return window.getComputedStyle(div.firstChild.firstChild, null).color === "rgb(255, 0, 0)";
}

console.log(hasMathMLSupport());

使用 Element.querySelector(":link"):(Safari 10+、Firefox ?+)

function hasMathMLSupport() {
  const div = document.createElement("div");
  div.innerHTML = '<math><mrow href=\"https://ya.ru\"><mn>1</mn></mrow></math>';
  document.body.appendChild(div);
  return !!div.querySelector(":link");
}

console.log(hasMathMLSupport());

使用 window.MathMLElement != null(该接口(interface)已在 MathML 4 规范中添加)