<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Loading MathJax Dynamically — MathJax v2.0 documentation</title>
<link rel="stylesheet" href="_static/mj.css" type="text/css" />
<link rel="stylesheet" href="_static/pygments.css" type="text/css" />
<script type="text/javascript">
var DOCUMENTATION_OPTIONS = {
URL_ROOT: '',
VERSION: '2.0',
COLLAPSE_INDEX: false,
FILE_SUFFIX: '.html',
HAS_SOURCE: true
};
</script>
<script type="text/javascript" src="_static/jquery.js"></script>
<script type="text/javascript" src="_static/underscore.js"></script>
<script type="text/javascript" src="_static/doctools.js"></script>
<!--<script type="text/javascript" src="../../MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>-->
<link rel="top" title="MathJax v2.0 documentation" href="index.html" />
<link rel="next" title="Modifying Math on the Page" href="typeset.html" />
<link rel="prev" title="Using Signals" href="signals.html" />
</head>
<body>
<div class="related">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index"
accesskey="I">index</a></li>
<li class="right" >
<a href="typeset.html" title="Modifying Math on the Page"
accesskey="N">next</a> |</li>
<li class="right" >
<a href="signals.html" title="Using Signals"
accesskey="P">previous</a> |</li>
<li><a href="index.html">MathJax v2.0 documentation</a> »</li>
</ul>
</div>
<div class="document">
<div class="documentwrapper">
<div class="bodywrapper">
<div class="body">
<div class="section" id="loading-mathjax-dynamically">
<span id="ajax-mathjax"></span><h1>Loading MathJax Dynamically<a class="headerlink" href="#loading-mathjax-dynamically" title="Permalink to this headline">¶</a></h1>
<p>MathJax is designed to be included via a <tt class="docutils literal"><span class="pre"><script></span></tt> tag in the
<tt class="docutils literal"><span class="pre"><head></span></tt> section of your HTML document, and it does rely on being
part of the original document in that it uses an <tt class="docutils literal"><span class="pre">onload</span></tt> or
<tt class="docutils literal"><span class="pre">DOMContentLoaded</span></tt> event handler to synchronize its actions with the
loading of the page. If you wish to insert MathJax into a document
after it has been loaded, that will normally occur <em>after</em> the page’s
<tt class="docutils literal"><span class="pre">onload</span></tt> handler has fired, and prior to version 2.0, MathJax had to
be told not to wait for the page <tt class="docutils literal"><span class="pre">onload</span></tt> event by calling
<tt class="xref py py-meth docutils literal"><span class="pre">MathJax.Hub.Startup.onload()</span></tt> by hand. That is no longer
necessary, as MathJax v2.0 detects whether the page is already
available and when it is, it processes it immediately rather than
waiting for an event that has already happened.</p>
<p>Here is an example of how to load and configure MathJax dynamically:</p>
<div class="highlight-javascript"><div class="highlight"><pre><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">script</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">"script"</span><span class="p">);</span>
<span class="nx">script</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="s2">"text/javascript"</span><span class="p">;</span>
<span class="nx">script</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="s2">"http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s2">"head"</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">script</span><span class="p">);</span>
<span class="p">})();</span>
</pre></div>
</div>
<p>If you need to provide in-line configuration, you can do that using a
MathJax’s configuration script:</p>
<div class="highlight-javascript"><div class="highlight"><pre><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">head</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s2">"head"</span><span class="p">)[</span><span class="mi">0</span><span class="p">],</span> <span class="nx">script</span><span class="p">;</span>
<span class="nx">script</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">"script"</span><span class="p">);</span>
<span class="nx">script</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="s2">"text/x-mathjax-config"</span><span class="p">;</span>
<span class="nx">script</span><span class="p">[(</span><span class="nb">window</span><span class="p">.</span><span class="nx">opera</span> <span class="o">?</span> <span class="s2">"innerHTML"</span> <span class="o">:</span> <span class="s2">"text"</span><span class="p">)]</span> <span class="o">=</span>
<span class="s2">"MathJax.Hub.Config({\n"</span> <span class="o">+</span>
<span class="s2">" tex2jax: { inlineMath: [['$','$'], ['\\\\(','\\\\)']] }\n"</span> <span class="o">+</span>
<span class="s2">"});"</span>
<span class="nx">head</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">script</span><span class="p">);</span>
<span class="nx">script</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">"script"</span><span class="p">);</span>
<span class="nx">script</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="s2">"text/javascript"</span><span class="p">;</span>
<span class="nx">script</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="s2">"http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"</span><span class="p">;</span>
<span class="nx">head</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">script</span><span class="p">);</span>
<span class="p">})();</span>
</pre></div>
</div>
<p>You can adjust the configuration to your needs, but be careful to get
the commas right, as Internet Explorer 6 and 7 will not tolerate an
extra comma before a closing brace. The <tt class="docutils literal"><span class="pre">window.opera</span></tt> test is
because some versions of Opera don’t handle setting <tt class="docutils literal"><span class="pre">script.text</span></tt>
properly, while some versions of Internet Explorer don’t handle
setting <tt class="docutils literal"><span class="pre">script.innerHTML</span></tt>.</p>
<p>Note that the <strong>only</strong> reliable way to configure MathJax is to use an
in-line configuration block of the type discussed above. You should
<strong>not</strong> call <tt class="xref py py-meth docutils literal"><span class="pre">MathJax.Hub.Config()</span></tt> directly in your code, as it will
not run at the correct time — it will either run too soon, in which case
<tt class="docutils literal"><span class="pre">MathJax</span></tt> may not be defined and the function will throw an error, or it
will run too late, after MathJax has already finished its configuration
process, so your changes will not have the desired effect.</p>
<div class="section" id="mathjax-and-greasemonkey">
<h2>MathJax and GreaseMonkey<a class="headerlink" href="#mathjax-and-greasemonkey" title="Permalink to this headline">¶</a></h2>
<p>You can use techniques like the ones discussed above to good effect in
GreaseMonkey scripts. There are GreaseMonkey work-alikes for all the
major browsers:</p>
<ul class="simple">
<li>Firefox: <a class="reference external" href="http://addons.mozilla.org/firefox/addon/748">GreaseMonkey</a></li>
<li>Safari: <a class="reference external" href="http://8-p.info/greasekit/">GreaseKit</a> (also requires <a class="reference external" href="http://www.culater.net/software/SIMBL/SIMBL.php">SIMBL</a>)</li>
<li>Opera: Built-in (<a class="reference external" href="http://www.ghacks.net/2008/08/10/greasemonkey-in-opera/">instructions</a>)</li>
<li>Internet Explorer: <a class="reference external" href="http://www.ie7pro.com/">IEPro7</a></li>
<li>Chrome: Built-in for recent releases</li>
</ul>
<p>Note, however, that most browsers don’t allow you to insert a script
that loads a <tt class="docutils literal"><span class="pre">file://</span></tt> URL into a page that comes from the web (for
security reasons). That means that you can’t have your GreaseMonkey
script load a local copy of MathJax, so you have to refer to a
server-based copy. The MathJax CDN works nicely for this.</p>
<hr class="docutils" />
<p>Here is a script that runs MathJax in any document that contains
MathML (whether it includes MathJax or not). That allows
browsers that don’t have native MathML support to view any web pages
with MathML, even if they say it only works in Firefox and
IE+MathPlayer.</p>
<div class="highlight-javascript"><div class="highlight"><pre><span class="c1">// ==UserScript==</span>
<span class="c1">// @name MathJax MathML</span>
<span class="c1">// @namespace http://www.mathjax.org/</span>
<span class="c1">// @description Insert MathJax into pages containing MathML</span>
<span class="c1">// @include *</span>
<span class="c1">// ==/UserScript==</span>
<span class="k">if</span> <span class="p">((</span><span class="nb">window</span><span class="p">.</span><span class="nx">unsafeWindow</span> <span class="o">==</span> <span class="kc">null</span> <span class="o">?</span> <span class="nb">window</span> <span class="o">:</span> <span class="nx">unsafeWindow</span><span class="p">).</span><span class="nx">MathJax</span> <span class="o">==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">((</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s2">"math"</span><span class="p">).</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)</span> <span class="o">||</span>
<span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagNameNS</span> <span class="o">==</span> <span class="kc">null</span> <span class="o">?</span> <span class="kc">false</span> <span class="o">:</span>
<span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagNameNS</span><span class="p">(</span><span class="s2">"http://www.w3.org/1998/Math/MathML"</span><span class="p">,</span><span class="s2">"math"</span><span class="p">).</span><span class="nx">length</span> <span class="o">></span> <span class="mi">0</span><span class="p">)))</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">script</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">"script"</span><span class="p">);</span>
<span class="nx">script</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="s2">"text/javascript"</span><span class="p">;</span>
<span class="nx">script</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="s2">"http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full"</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s2">"head"</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">script</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div>
<p><strong>Source</strong>: <a class="reference external" href="_static/mathjax_mathml.user.js">mathjax_mathml.user.js</a></p>
<hr class="docutils" />
<p>Here is a script that runs MathJax in Wikipedia pages after first
converting the math images to their original TeX code.</p>
<div class="highlight-javascript"><div class="highlight"><pre><span class="c1">// ==UserScript==</span>
<span class="c1">// @name MathJax in Wikipedia</span>
<span class="c1">// @namespace http://www.mathjax.org/</span>
<span class="c1">// @description Insert MathJax into Wikipedia pages</span>
<span class="c1">// @include http://en.wikipedia.org/wiki/*</span>
<span class="c1">// ==/UserScript==</span>
<span class="k">if</span> <span class="p">((</span><span class="nb">window</span><span class="p">.</span><span class="nx">unsafeWindow</span> <span class="o">==</span> <span class="kc">null</span> <span class="o">?</span> <span class="nb">window</span> <span class="o">:</span> <span class="nx">unsafeWindow</span><span class="p">).</span><span class="nx">MathJax</span> <span class="o">==</span> <span class="kc">null</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">//</span>
<span class="c1">// Replace the images with MathJax scripts of type math/tex</span>
<span class="c1">//</span>
<span class="kd">var</span> <span class="nx">images</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">'img'</span><span class="p">),</span> <span class="nx">count</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="nx">images</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">;</span> <span class="nx">i</span> <span class="o">>=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o">--</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">img</span> <span class="o">=</span> <span class="nx">images</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">img</span><span class="p">.</span><span class="nx">className</span> <span class="o">===</span> <span class="s2">"tex"</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">script</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">"script"</span><span class="p">);</span> <span class="nx">script</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="s2">"math/tex"</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">opera</span><span class="p">)</span> <span class="p">{</span><span class="nx">script</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">img</span><span class="p">.</span><span class="nx">alt</span><span class="p">}</span> <span class="k">else</span> <span class="p">{</span><span class="nx">script</span><span class="p">.</span><span class="nx">text</span> <span class="o">=</span> <span class="nx">img</span><span class="p">.</span><span class="nx">alt</span><span class="p">}</span>
<span class="nx">img</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">replaceChild</span><span class="p">(</span><span class="nx">script</span><span class="p">,</span><span class="nx">img</span><span class="p">);</span> <span class="nx">count</span><span class="o">++</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">count</span><span class="p">)</span> <span class="p">{</span>
<span class="c1">//</span>
<span class="c1">// Load MathJax and have it process the page</span>
<span class="c1">//</span>
<span class="kd">var</span> <span class="nx">script</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">"script"</span><span class="p">);</span>
<span class="nx">script</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="s2">"text/javascript"</span><span class="p">;</span>
<span class="nx">script</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="s2">"http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full"</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s2">"head"</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">script</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
</pre></div>
</div>
<p><strong>Source</strong>: <a class="reference external" href="_static/mathjax_wikipedia.user.js">mathjax_wikipedia.user.js</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="sphinxsidebar">
<div class="sphinxsidebarwrapper">
<h3><a href="index.html">Table Of Contents</a></h3>
<ul>
<li><a class="reference internal" href="#">Loading MathJax Dynamically</a><ul>
<li><a class="reference internal" href="#mathjax-and-greasemonkey">MathJax and GreaseMonkey</a></li>
</ul>
</li>
</ul>
<h4>Previous topic</h4>
<p class="topless"><a href="signals.html"
title="previous chapter">Using Signals</a></p>
<h4>Next topic</h4>
<p class="topless"><a href="typeset.html"
title="next chapter">Modifying Math on the Page</a></p>
<div id="searchbox" style="display: none">
<h3>Quick search</h3>
<form class="search" action="search.html" method="get">
<input type="text" name="q" size="18" />
<input type="submit" value="Go" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
<p class="searchtip" style="font-size: 90%">
Enter search terms or a module, class or function name.
</p>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="related">
<h3>Navigation</h3>
<ul>
<li class="right" style="margin-right: 10px">
<a href="genindex.html" title="General Index"
>index</a></li>
<li class="right" >
<a href="typeset.html" title="Modifying Math on the Page"
>next</a> |</li>
<li class="right" >
<a href="signals.html" title="Using Signals"
>previous</a> |</li>
<li><a href="index.html">MathJax v2.0 documentation</a> »</li>
</ul>
</div>
<div class="footer">
© Copyright 2012 Design Science.
Created using <a href="http://sphinx.pocoo.org/">Sphinx</a> 1.0.7.
</div>
</body>
</html>