MathJax 不会在 iframe 中呈现

Question

我正在尝试让 MathJax 在 iframe 中呈现。 Here is a fiddle 举个简单的例子。当您运行 fiddle 时，您可以在底部看到 "MathJax loading" 横幅，但不会呈现 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);

我看过, but my case seems different (since I am calling MathJax Typeset from within the iframe). Similarly, this old Google thread indicates I need to load the MathJax script inside the iframe, which I am doing already. The MathJax docs indicate that I should call MathJax.Hub.Queue(["Typeset",MathJax.Hub]); when trying to queue up rendering of dynamic content, which I am doing (though I suspect I may not need to manually queue up Typesetting?). MathJax is loaded in the <head> script of each iframe, as recommended。

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

谢谢！

Answer 1

我最终通过编辑源文档本身来完成此操作，而不是在事后尝试注入 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>">

Answer 2

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

否则你是在正确的轨道上，但事实证明 jQuery 不知何故把你搞砸了。 append() 调用做了一些有趣的事情，MathJax 最终运行ning 在外部 window，而不是内部。我不太确定这是怎么发生的，但解决方案是为此使用常规 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);

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

MathJax 不会在 iframe 中呈现

MathJax will not render in an iframe

javascript

iframe

mathjax