如何从 JavaScript 检测 MathML 标签支持（、）？

发布于 2024-10-14 21:21:48 字数 383 浏览 7 评论 0原文

我可以通过以下方式检测 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';

但是如何检测对和的支持？

原文

I can detect MathML support with:

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';

but how to detect support for <mfrac> and <mtable> ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

自找没趣 2024-10-21 21:21:48

使用 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`

（在夜间模式下的 Mi 浏览器中不起作用，因为它将颜色更改为 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 （该接口已在 MathML 4 规范中添加）

With `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());

With `window.getComputedStyle`

(does not work in Mi Browser in Night Mode as it changes color to 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());

With `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());

With window.MathMLElement != null (the interface was added in MathML 4 spec)

回复收藏 0 原文

呆橘 2024-10-21 21:21:48

在 jqmath 中，我构造了一个隐藏的元素并进行比较其计算高度与非分数的高度。实际代码请参阅 jqmath-0.1.js 中的 M.checkMathML 函数。由于尝试使用或不使用 XML 命名空间（取决于浏览器），并允许 Internet Explorer 的 MathPlayer 插件使用命名空间前缀，这有点复杂。

回复收藏 0 原文

野鹿林 2024-10-21 21:21:48

遵循本文档的浏览器必须实现多个属性（也称为绑定）对于 DOM 中的特定 MathML 元素。因此，您可以简单地创建一个 MathML mtable 元素并检查浏览器是否添加了例如 rowalign 属性：

var tmp = document.createElementNS('http://www.w3.org/1998/Math/MathML',
                                   'mtable');
if (tmp.hasOwnProperty('rowalign')) {
  return true;
} else {
  return false;
}

Following this document conforming browsers must implement several properties (a.k.a. bindings) for specific MathML elements in the DOM. You can therefore simply create a MathML mtable element and check, if the browser adds, e.g., the rowalign property:

var tmp = document.createElementNS('http://www.w3.org/1998/Math/MathML',
                                   'mtable');
if (tmp.hasOwnProperty('rowalign')) {
  return true;
} else {
  return false;
}

回复收藏 0 原文

小耗子 2024-10-21 21:21:48

这似乎仍然不是直截了当的。

http://www.w3.org/TR/MathML2/chapter8.html

可以通过使用测试字符串“org.w3c.dom.mathml”调用 DOMImplementation::hasFeature 方法来查询对 MathML 文档对象模型的支持

这意味着一个简单的测试，但是 Chrome 和 IE 通过以下方式支持此操作插件，但 Chrome 即使没有插件也会返回 true

我的解决方案是使用 w3c 规范，但对于浏览器 [chrome] 必须做出相反响应的情况是正确的。然后，如果有必要，我可以使用 MathJax，除了 Firefox 之外，总是如此。该脚本位于 html <头>部分

<script type="text/javascript">

  //Browser detector for Chrome
  //returns true if the Browser is Chrome
  function isChrome(){
    var regex = /Chrome\/[0-9]{1,2}\.[0-9]/
    var matches = navigator.userAgent.match(regex)
    //console.log( matches )
    return (matches!=null && matches.length==1)
  }

  /*
   *  Feature Detect for MathML as w3c specification
   *  <returns>boolean: true if mathML is supported in browser
   */
  function hasFeatureMathML(){
    MATHML_FEATURE = "org.w3c.dom.mathml"     //as per w3c specification
    MATHML_FEATURE_VERSION = "2.0"            //Any version number appears to work
    if(isChrome()) return false               //Opps Chrome not natively supported yet
    return document.implementation.hasFeature(MATHML_FEATURE, MATHML_FEATURE_VERSION )
  }

  /*
   * init MathML use MathJax according to
   *     http://docs.mathjax.org/en/latest/dynamic.html
   * with additional test to confirm necessity
   * <returns>boolean: true if mathML is supported in browser
   */
  function initMathML(){
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src  = "http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML";

    //doctorBob added test on next line, return if has native support for MathML
    if( hasFeatureMathML() ) return true

    document.getElementsByTagName("head")[0].appendChild(script)
    return false
  }

  //initialize in html <head> incase MathJax is required
  var browserHasMathML = initMathML()
  if( !browserHasMathML )console.log("No Native MathML using MathJax")

</script>

我并没有真正考虑安装浏览器插件，因为并不是每个人都安装了它们。
这适用于 IE 8、Chrome 39、Firefox 38、Komodo Edit 6

This still does not seem to be straight forward.

http://www.w3.org/TR/MathML2/chapter8.html

Support for the MathML Document Object Model may be queried by calling the DOMImplementation::hasFeature method with the test string "org.w3c.dom.mathml"

This implies a simple test however Chrome and IE support this through plug ins, but Chrome returns true even when it has no plug-in

My solution is to use the w3c spec but correct for cases where the browser [chrome] has to opposite response. Then I can use MathJax if necessary, which is always, except for firefox. The script goes in the html < head > section

<script type="text/javascript">

  //Browser detector for Chrome
  //returns true if the Browser is Chrome
  function isChrome(){
    var regex = /Chrome\/[0-9]{1,2}\.[0-9]/
    var matches = navigator.userAgent.match(regex)
    //console.log( matches )
    return (matches!=null && matches.length==1)
  }

  /*
   *  Feature Detect for MathML as w3c specification
   *  <returns>boolean: true if mathML is supported in browser
   */
  function hasFeatureMathML(){
    MATHML_FEATURE = "org.w3c.dom.mathml"     //as per w3c specification
    MATHML_FEATURE_VERSION = "2.0"            //Any version number appears to work
    if(isChrome()) return false               //Opps Chrome not natively supported yet
    return document.implementation.hasFeature(MATHML_FEATURE, MATHML_FEATURE_VERSION )
  }

  /*
   * init MathML use MathJax according to
   *     http://docs.mathjax.org/en/latest/dynamic.html
   * with additional test to confirm necessity
   * <returns>boolean: true if mathML is supported in browser
   */
  function initMathML(){
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src  = "http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML";

    //doctorBob added test on next line, return if has native support for MathML
    if( hasFeatureMathML() ) return true

    document.getElementsByTagName("head")[0].appendChild(script)
    return false
  }

  //initialize in html <head> incase MathJax is required
  var browserHasMathML = initMathML()
  if( !browserHasMathML )console.log("No Native MathML using MathJax")

</script>

I didn't really look into installing the browser plugins, because not everyone has them installed.
This works in IE 8, Chrome 39, Firefox 38, Komodo Edit 6

回复收藏 0 原文

~没有更多了~