为什么我从 html doc 得到函数未定义错误？

Question

我编写了一个小型聊天应用程序。 起初，所有代码都包含在一个 HTML 文档中，并且工作正常。 将 CSS、HTML 和 JS 分成单独的文件后。 从 HTML 文档中调用的函数 register_popup 现在生成；

"ReferenceError: register_popup is not defined"

我可以看到脚本正在加载，并且从开发人员工具中我看不到任何问题，所有 200 和 302。

HTML

<div class="sidebar-name">
            <a href="#" onclick="register_popup('user4', 

'USER4');">

                <img width="30" height="30" src="" />
                <span>user4</span>
            </a>

可以看到脚本正在加载... 正在使用，

<script>
var url = "static/js/chatpop.js";
$.getScript(url);
</script>

alos 尝试过更改 HTML：

<div class="sidebar-name">
            <a href="javascript:register_popup('user3', 'USER3');">
                <img width="30" height="30" src="" />
                <span>user3</span>
            </a>
        </div>

但这也不起作用。如前所述，我在加载脚本时得到 200，当包含在同一页面中时，一切正常。只有将代码分成各自的文件后才会发生错误，

下面也可以看到加载ok了。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3      /jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

欢迎任何帮助...

功能

function register_popup(id, name)
            {

                for(var iii = 0; iii < popups.length; iii++)
                {  
                    //already registered. Bring it to front.
                    if(id == popups[iii])
                    {
                        Array.remove(popups, iii);

                        popups.unshift(id);

                        calculate_popups();


                        return;
                    }
                }              

                var element = '<div class="popup-box chat-popup" id="'+ id +'">';
                element = element + '<div class="popup-head">';
                element = element + '<div class="popup-head-left">'+ name +'</div>';
                element = element + '<div class="popup-head-right"><a href="javascript:close_popup(\''+ id +'\');">&#10005;</a></div>';
                element = element + '<div style="clear: both"></div></\
                div><div class="popup-messages">\
                <form action="chatpop/post" id="chat-form" method="post">\
                <textarea style="resize:none;"cols="41" rows="14" >\
                </textarea><input type="submit" id="chat-form" value="Send">\
                </input></form></div></div>';

                document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + element; 

                popups.unshift(id);

                calculate_popups();

            }

Answer 1

这里

<script>
  var url = "static/js/chatpop.js";
  $.getScript(url);
</script>

您正在尝试以异步方式导入脚本并立即在您的 html 中调用脚本中定义的一些函数（在实际加载脚本之前）。

您应该以阻塞方式在标题中引用您的脚本，例如：

<script src="static/js/chatpop.js" />

或在获取脚本后更改锚标记：

...
<a id="myAnchor">
...

$.getScript(url).done(function(){
        $("#myAnchor").attr("href", register_popup('user3', 'USER3'))
    });
}