Hello all,
This might be a stupid question, but here goes:
I’ve been adding some javascript to a deck I’ve been working on, and finally bit the bullet and refactored it all out into a separate file to import on both the front and back sides of the card. When I did, I found that adding only fully worked on anki desktop. On AnkiMobile and AnkiWeb, the front of the first card would be broken, and then all subsequent cards would be fine. After taking a look through the forums, I finally found a solution of the following form:
(I am aware that this apparently doesn’t work with anki droid but this is a personal project and I don’t have a android, so I’ve ignored it.)
<script>
(async function () {
// Cludge for loading a script on ankiweb and ankimobile.
var injectScript = (src) => {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = src;
script.async = true;
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
};
// parsePinyin is a function I've defined in _lib.js, picked mostly at random
if (typeof parsePinyin === 'undefined') await injectScript('_lib.js');
// All the rest of my code
})();
</script>
My question is mostly: what’s going on? Why does the script needed to be loaded like this?
Is it that _lib.js doesn’t exist when front.html is first rendered by ankiweb/ankimobile? I’ll admit I’m already kind of shaky on my html and javascript to begin with so async and defer on script tags already leaving me pretty lost, so I might be missing something obvious.