MathJax 不会在 iframe 中呈现答案

【问题标题】：MathJax will not render in an iframeMathJax 不会在 iframe 中呈现
【发布时间】：2015-08-20 20:03:59
【问题描述】：

我正在尝试让 MathJax 在 iframe 中呈现。 Here is a fiddle 举个简单的例子。运行 fiddle 时，您可以在底部看到“MathJax 加载”横幅，但 iframe 中的文本未呈现。（应该像所附图像那样渲染）。

我的代码在这里转载：

html:

<iframe id="my-frame" srcdoc="<div>This is \(\mu_s\). </div>">

javascript：

var mathJax = 'https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full',
            script = document.createElement('script'),
            initScript = document.createElement('script');

        script.type = 'text/javascript';
        script.src = mathJax;

        initScript.type = 'text/javascript';
        initScript.text = '$(document).on("ready", function () {MathJax.Hub.Queue(["Typeset",MathJax.Hub]);});';

$('#my-frame').contents().find('head').append(script);
$('#my-frame').contents().find('body').append(initScript);

我查看了SO question here，但我的情况似乎不同（因为我从 iframe 中调用 MathJax Typeset）。同样，this old Google thread 表示我需要在 iframe 中加载 MathJax 脚本，我已经在这样做了。 MathJax docs 表示我在尝试排队渲染动态内容时应该调用MathJax.Hub.Queue(["Typeset",MathJax.Hub]);，我正在这样做（尽管我怀疑我可能不需要手动排队排版？）。 MathJax 在每个 iframe 的 <head> 脚本中加载，as recommended。

不太确定还有什么可以尝试的，任何帮助将不胜感激。我在控制台中看到的错误是Uncaught ReferenceError: MathJax is not defined，这让我认为它没有在 iframe 内正确加载...

谢谢！

【问题讨论】：

未来注意事项：cdn.mathjax.org 即将结束生命周期，请查看 mathjax.org/cdn-shutting-down 以了解迁移提示。

标签： javascript iframe mathjax

【解决方案1】：

您的代码存在几个问题。首先，您不需要initScript，因为MathJax 会自动运行一次（即使您这样做了，因为jQuery 没有加载到iframe 中，所以无论如何您都不能执行$(document).on()）。此外，您应该在 iframe 的文档中创建脚本元素，而不是在外部文档中（它们不一样）。

否则你是在正确的轨道上，但事实证明 jQuery 不知何故把你搞砸了。 append() 调用做了一些有趣的事情，MathJax 最终在外部窗口中运行，而不是内部窗口。我不太确定这是怎么发生的，但解决方案是为此使用常规的appendChild() 方法而不是 jQuery。所以如果你使用

var doc = $('#my-frame').contents()[0];

var script = doc.createElement('script');
script.type = 'text/javascript';
script.src = 'https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full';

// $('#my-frame').contents().find('head').append(script);  // this is the line that is causing trouble.
doc.head.appendChild(script);

它应该对你有用（它对我有用）。

【讨论】：

谢谢。我的用例变得有点复杂，但这确实效果更好（我意识到也将 jQuery 注入 iframe，但这没有帮助）。

【解决方案2】：

我最终通过编辑源文档本身来完成此操作，而不是事后尝试注入 MathJax...working fiddle.

<iframe id="my-frame" srcdoc="<html><head><script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full'></script></head><body><div>This is \(\mu_s\). </div></body></html>">

【讨论】：

未来注意事项：cdn.mathjax.org 即将结束生命周期，请查看 mathjax.org/cdn-shutting-down 以了解迁移提示。