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行

上生成错误：mkBtnUsername = mkBtnUsername.replace("@", '').

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

Answer 1

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

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

1 个答案: