我可以通过以下方式检测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>
的支持?
答案 0 :(得分:3)
在jqmath中,我构造了一个隐藏的<mfrac>
元素,并将其计算出的高度与非分数的高度进行比较。有关实际代码,请参阅jqmath-0.1.js中的M.checkMathML函数。尝试使用或不使用XML名称空间(取决于浏览器),并允许Internet Explorer的MathPlayer插件的名称空间前缀,这有点复杂。
答案 1 :(得分:1)
符合this document条件的浏览器必须为DOM中的特定MathML元素实现多个属性(a.k.a. bindings)。因此,您只需创建MathML mtable元素,并在浏览器添加时检查,例如rowalign
属性:
var tmp = document.createElementNS('http://www.w3.org/1998/Math/MathML',
'mtable');
if (tmp.hasOwnProperty('rowalign')) {
return true;
} else {
return false;
}
答案 2 :(得分:1)
这似乎仍然不是直截了当的。
http://www.w3.org/TR/MathML2/chapter8.html
可以通过使用测试字符串“org.w3c.dom.mathml”调用DOMImplementation :: hasFeature方法来查询对MathML文档对象模型的支持
这意味着一个简单的测试,但Chrome和IE通过插件支持此功能,但即使没有插件,Chrome也会返回 true
我的解决方案是使用w3c规范,但对于浏览器[chrome]必须响应的情况更正。然后我可以在必要时使用MathJax,除了firefox之外总是如此。该脚本在html&lt;头&gt;节
<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
答案 3 :(得分:1)
Element#getBoundingClientRect
function hasMathMLSupport() {
const div = document.createElement("div");
div.innerHTML = '<math><mspace height="20px" width="20px"></mspace></math>';
document.body.appendChild(div);
return div.firstChild.firstChild.getBoundingClientRect().height === 20;
}
console.log(hasMathMLSupport());
&#13;
window.getComputedStyle
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());
&#13;
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());
&#13;