我正在尝试让 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 加载于 <head>
每个 iframe 的脚本,as recommended .
不太确定还可以尝试什么,任何帮助将不胜感激。我在控制台中看到的错误是 Uncaught ReferenceError: MathJax is not defined
,这让我认为它没有在 iframe 内正确加载...
谢谢!
最佳答案
您的代码存在几个问题。首先,您不需要 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);
它应该对你有用(它对我有用)。
关于javascript - MathJax 不会在 iframe 中呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32074790/