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

Posted 2023-02-24

【中文标题】为啥我从 html doc 得到函数未定义错误？

【英文标题】：Why do I get function undefined error from html doc?为什么我从 html doc 得到函数未定义错误？

【发布时间】：2018-10-03 19:43:38

【问题描述】：

我编写了一个小型聊天应用程序。 起初，所有代码都包含在一个 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   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   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();

            

【问题讨论】：

脚本已加载，但它会在您尝试调用函数之前加载吗？

是的...

【参考方案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'))
    );

【讨论】：

为什么我会看到 200 GET chatpop.js_"CSRF_VALUE" ...如果我按照您的建议调用 getScript，它只适用于引用的用户而不适用于其他用户？？

是的，200 表示脚本已正确加载，问题是您正在异步执行此操作，并且您试图在脚本实际可用之前调用 HTML 中的函数

感谢帮助...但是第一个建议会导致空白页，即阻止方法。第二个给我 SyntaxError: expected expression, got '