XHTML 过渡中的 iframe 不起作用答案

【问题标题】：iframe in XHTML Transitional not workingXHTML 过渡中的 iframe 不起作用
【发布时间】：2014-07-20 22:00:34
【问题描述】：

所以，基本上我想要做的是拥有一个 Chrome 扩展来正确呈现 MathML 表达式（我已经尝试过“MathJax for Chrome”扩展，但它对我不起作用）。

我最初的计划是在 head 节点中添加一个指向 MathJax 代码的链接，但这不起作用（我假设是因为它是在页面加载之后添加的）。

我目前的计划是将每个 MathML 对象替换为引用 MathJax 代码并仅包含原始 MathML 对象的iframe。由于iframe 的HTML 是基于原始的MathML 元素，所以我使用srcdoc 属性。这是我当前的脚本：

$(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);
    });
});

这适用于非 XHTML 页面，例如 Mozilla 的 MathML“酷刑测试”，但对于 XHTML（甚至是过渡），我只得到 "FOO" 文本。

为了让iframes 为 XHTML Transitional 工作，我还需要做些什么吗？还是有更好的方法来实现我想要的？

【问题讨论】：

MathJax 应该可以在 XHTML 中添加到头部，即使在页面加载之后也是如此。不过，我们并没有在 XHTML 中进行大量测试，因此可能需要修复一些问题。你能举一个完整的例子来说明你已经尝试过什么吗？ iframe 方法应该不是必需的，即使有效也会非常低效。
这是我最初的尝试：pastebin.com/Tc6npxuC

标签： javascript jquery debugging iframe xhtml-transitional

【解决方案1】：

问题来了：

srcdoc 作为HTML5 的一部分添加到 iframe 元素中，由 HTML5 文档类型触发
XHTML Transitional 不使用 HTML5 文档类型

使用编码的data: URI 加上object 元素以实现向后兼容性，如下所示：

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"})

参考文献

【讨论】：