iframe in XHTML Transitional not working

Question

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?

MathJax should work in XHTML when added to the head even after the page is loaded. We don't do a lot of testing in XHTML, though, so something may need fixing. Can you give a complete example showing what you have tried? The iframe approach should not be necessary, and will be very inefficient even if it works. — Davide Cervone, May 31 '14 at 09:41

Paul Sweatte · Answer 1 · 2015-05-30T04:05:15.427

Here is the issue:

srcdoc was added to the iframe element as part of the HTML5, which is triggered by the HTML5 doctype
XHTML Transitional does not use the HTML5 doctype

Use an encoded data: URI plus an object element for backwards compatibility, as follows:

var newobj = $("<object/>", {"text":"FOO"});
var html = "<html><head></head><body><p>XHTML is the best</p></body></html>"
var xhtml = encodeURIComponent(html);
newobj.appendTo("body");
/* Add attribute values after appending to the DOM */
$(newobj).attr({data:'data:text/html;charset=utf-8;,'+xhtml, type:"text/html"})

References

iframe in XHTML Transitional not working

1 Answers1