So, basically what I'm trying to do is have a Chrome extension to properly render MathML expressions (I've tried the "MathJax for Chrome" extension, but it doesn't work for me).
My original plan was to just add a link to the MathJax code in the head node, but this doesn't work (I assume because it's added after the page is loaded).
My current plan is to replace each MathML object with an iframe that references the MathJax code and just includes the original MathML object. Since the iframe's HTML is based on the original MathML element, I'm using the srcdoc attribute. Here's my current script:
$(document).ready(function() {
$("math").each(function(index, obj) {
// create an inline frame to replace the math element
var iframe = document.createElement("iframe");
var html = '<html><head><script type="text/javascript" src="https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script></head>';
html += '<body>';
// http://stackoverflow.com/questions/2419749/get-selected-elements-outer-html
html += $(obj).clone().wrap('<p>').parent().html();
html += '</body></html>';
$(iframe).attr("srcdoc", html);
iframe.textContent = "FOO";
$(obj).replaceWith(iframe);
});
});
This works for non-XHTML pages, like Mozilla's MathML "Torture Test", but for XHTML (even Transitional) I just get the "FOO" text.
Is there something else I need to do to get iframes working for XHTML Transitional? Or is there a better way to achieve what I want?
Here is the issue:
srcdocwas added to the iframe element as part of the HTML5, which is triggered by the HTML5 doctypeXHTML Transitional does not use the HTML5 doctype
Use an encoded data: URI plus an
objectelement for backwards compatibility, as follows:References