258 lines
23 KiB
HTML
258 lines
23 KiB
HTML
|
|
<!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 v1.1 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: '1.1',
|
|
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 v1.1 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 v1.1 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> 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 so MathJax will not be able to tell if it is
|
|
safe for it to process the contents of the page. Indeed, it will wait
|
|
forever for its <tt class="docutils literal"><span class="pre">onload</span></tt> handler to fire, and so will never process
|
|
the page.</p>
|
|
<p>To solve this problem, you will need to call MathJax’s <tt class="docutils literal"><span class="pre">onload</span></tt>
|
|
handler yourself, to let it know that it is OK to typeset the
|
|
mathematics on the page. You accomplish this by calling the
|
|
<tt class="xref py py-meth docutils literal"><span class="pre">MathJax.Hub.Startup.onload()</span></tt> method as part of your MathJax
|
|
startup script. To do this, you will need to give MathJax an in-line
|
|
configuration.</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"</span><span class="p">;</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">config</span> <span class="o">=</span> <span class="s1">'MathJax.Hub.Config({'</span> <span class="o">+</span>
|
|
<span class="s1">'extensions: ["tex2jax.js"],'</span> <span class="o">+</span>
|
|
<span class="s1">'jax: ["input/TeX","output/HTML-CSS"]'</span> <span class="o">+</span>
|
|
<span class="s1">'});'</span> <span class="o">+</span>
|
|
<span class="s1">'MathJax.Hub.Startup.onload();'</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">config</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">config</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>You can adjust the <tt class="docutils literal"><span class="pre">config</span></tt> variable to your needs, but be careful to get
|
|
the commas right. The <tt class="docutils literal"><span class="pre">window.opera</span></tt> test is because some versions of
|
|
Opera doesn’t handle setting <tt class="docutils literal"><span class="pre">script.text</span></tt> properly, while Internet
|
|
Explorer doesn’t handle setting the <tt class="docutils literal"><span class="pre">innerHTML</span></tt> of a script tag.</p>
|
|
<p>Here is a version that uses the <tt class="docutils literal"><span class="pre">config=filename</span></tt> method to
|
|
configure MathJax:</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-full"</span><span class="p">;</span>
|
|
|
|
<span class="kd">var</span> <span class="nx">config</span> <span class="o">=</span> <span class="s1">'MathJax.Hub.Startup.onload();'</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">config</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">config</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>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 its 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 Forefox 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">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="kd">var</span> <span class="nx">config</span> <span class="o">=</span> <span class="s1">'MathJax.Hub.Startup.onload()'</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">config</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">config</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">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="kd">var</span> <span class="nx">config</span> <span class="o">=</span> <span class="s1">'MathJax.Hub.Startup.onload()'</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">config</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">config</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 v1.1 documentation</a> »</li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer">
|
|
© Copyright 2011 Design Science.
|
|
Created using <a href="http://sphinx.pocoo.org/">Sphinx</a> 1.0.7.
|
|
</div>
|
|
|
|
</body>
|
|
</html> |