javascript - 无法从动态加载的脚本中读取 DOM 属性

Question

在 HTML 中静态包含一个脚本，如下所示:

<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>

但是，动态调用脚本不起作用。

JavaScript 代码:

    // 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);

这是发生错误的位置(来自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("@", '')

此代码生成错误:Uncaught TypeError: Cannot read property 'replace' of null on the line mkBtnUsername = mkBtnUsername.replace("@", '').

显然，即使在脚本中设置了 data-username 属性，也未设置 mkBtnUsername。

Answer 1

我的猜测是 document.currentScript 可能是 null (如果在事件处理程序内部检查该属性，例如 $(document)，则可能会发生这种情况。准备好)，并且您的后备函数选择了错误的脚本(scripts[scripts.length - 1])。尝试记录 window.currentScript。