Reputation: 34523
Including a script statically in the HTML like the one below works:
<script type="text/javascript" src="http://meerkatapp.co/widgets/embed.js" data-mute="false" data-social="false" data-cover="default" data-type="square" data-username="jessicadelfino"></script>
However, invoking the script dynamically doesn't work.
JavaScript code:
// Create script object
var script = document.createElement("script");
// Configure script with Meerkat data
script.type = "text/javascript";
script.src = "http://meerkatapp.co/widgets/embed.js";
script.setAttribute("data-mute", "false");
script.setAttribute("data-social", "false");
script.setAttribute("data-cover", "default");
script.setAttribute("data-type", "square");
script.setAttribute("data-username", "jessicadelfino");
// Append script object
$("body").append(script);
Here's where the error occurs (from http://meerkatapp.co/widgets/embed.js
):
window.currentScript = document.currentScript || (function() {
var scripts = document.getElementsByTagName('script');
return scripts[scripts.length - 1];
})();
main(window.currentScript)
function main(currentScript) {
...
var btnContainerElm = currentScript
var mkBtnUsername = btnContainerElm.getAttribute("data-username")
...
mkBtnUsername = mkBtnUsername.replace("@", '')
This code generates the error: Uncaught TypeError: Cannot read property 'replace' of null
on the line mkBtnUsername = mkBtnUsername.replace("@", '').
Clearly mkBtnUsername
is not set even though the data-username
attribute is set in the script.
Upvotes: 0
Views: 370
Reputation:
My guess is document.currentScript
is probably null (it can happen if that property is checked inside of an event handler, say $(document).ready
), and your fallback function is choosing the wrong script (scripts[scripts.length - 1]
). Try to log window.currentScript
.
Upvotes: 1