Skip to content
GitLab
Open
Issue created by Administrator@rootContributor

mathjax duplicates and resizes when iframe dynamically changes content

Created by: LingyunGuo

Working on a project where I need MathJax to work in an iframe. Basically, the iframe would dynamically load its content from input, and the input might contain math equations that need to be converted by MathJax. I tried the method of using MathJax.Hub.Queue(...) to run MathJax on dynamic content, but it doesn't seem to be working. On the first run everything works just fine, and then once I change the input, the output from MathJax just mess up. It duplicates the math equations and resize everything from font-size:121% to font-size:50%. The duplication problem can be solved by adding "AssistiveMML":{disabled: true} to the config object, however, I cannot get the equations to keep their normal size. I wonder if I'm using MathJax in a wrong way that leads to this problem. I made up a small example to show what the problem is like. I'm working in Chrome on a win10 machine, never tested this with other browsers before but I feel like this is not related to the browser.

index.html

<html>

<head>
</head>

<body>
    <textarea rows="10" cols="20" id="textarea"></textarea>
    <iframe id="frame">
    </iframe>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="
        crossorigin="anonymous"></script>
    <script src="main.js"></script>
</body>

</html>

main.js

$(document).ready(function () {
    var html = "<script type='text/javascript' src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML'></script>";
    $("#textarea").bind("input propertychange", function () {
        var val = $(this).val();
        var content = "<body><script type='math/tex'>" + val + "</script></body>";
        var script = "<script>MathJax.Hub.Queue(['Typeset',MathJax.Hub]);</script>";
        $("#frame")[0].contentWindow.document.open();
        $("#frame")[0].contentWindow.document.write(html + content + script);
        $("#frame")[0].contentWindow.document.close();
    });
});