javascript - MathJax 不会在 iframe 中呈现

标签 javascript iframe mathjax

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

expected output

我的代码复制在这里:

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/

相关文章:

javascript - 我正在尝试在 Bootstrap 下拉菜单上实现点击事件

javascript - YouTube onStateChange事件无法正常运行

javascript - 如何获取 iframe 的全部内容?

javascript - 将简化的数学符号转换为 Latex/MathML

google-chrome - Mathjax 方程在每个公式上都有符号 `|`

javascript - 如何使用jqGrid、多选和Spring序列化删除数据?

javascript - 无法在多维数组上应用扩展运算符

javascript - 从 mathjax 纸质输入 polymer 对象中提取输入值

javascript - 如何在 switch 语句中捆绑 "data-"属性的案例?

PHP 多个 cookie 在 iPad/iPhone 浏览器上不起作用