在外部 js 文件中的脚本内调用 html 函数答案

【问题标题】：calling a html function inside script in external js file在外部 js 文件中的脚本内调用 html 函数
【发布时间】：2018-06-18 05:36:14
【问题描述】：

我在 html 文件的 script 标签内写了一个 javascript 函数...

<!DOCTYPE html>
<html>    
<head>
    <title> Sample Application </title>    
</head>    
<body>
    <h1 style="text-align:  left">Test</h1>

    <div id="conversation" style="width: 600px; height: 400px; border: 1px solid #ccc; background-color: #eee; padding: 4px; overflow: scroll"></div>
    <form id="chatform" style="margin-top: 10px" onsubmit="return pushChat();">
        <input type="text" id="wisdom" size="80" value="" placeholder="Type your issue">
    </form>
    <script type="text/javascript">
// set the focus to the input box
        document.getElementById("wisdom").focus();

        function pushChat() {

            // if there is text to be sent...
            var wisdomText = document.getElementById('wisdom');
            if (wisdomText && wisdomText.value && wisdomText.value.trim().length > 0) {

                // disable input to show we're sending it
                var wisdom = wisdomText.value.trim();
                wisdomText.value = '';
                wisdomText.locked = false;

                showRequest(wisdom);                
                // send it to the Lex runtime
                botaction(wisdom);
            }
            // we always cancel form submission
            return false;
        }                   

        function botaction(action){

        console.log("action: " + JSON.stringify(action));

        switch (action.intentName) {
        case "details":
            var Id      =   action.userid;
            var arguments   = [Id];
            verify(arguments);
            break;


        default:
            console.log('No action  found.');
            console.log('executing the default action based on response');
            break;
            }           
        }
        function verify(arguments){


        }                       
    </script>    
</body>
</html>

我需要将函数 verify(arguments) 移动到外部 js 文件。我必须移动它，因为我正在调用需要包含模块的 nodejs 子进程。如何将函数移动到外部 js 文件，然后从 html 文件调用验证函数。

【问题讨论】：

有什么问题？您只需要创建一个新的 javascript 文件并将其链接到另一个 <script> 标记
“正在调用需要包含模块的 nodejs 子进程” - 我怀疑这个问题是相关的：stackoverflow.com/questions/13840429/…
我想在html脚本标签里面调用一个外部js文件的函数
为什么不直接复制并粘贴到文件中并将其包含在 head 中？那么你可以在任何你想要的地方调用函数

标签： javascript html node.js

【解决方案1】：

这样制作三个文件。它会解决你的问题。

index.html

<!DOCTYPE html>
<html>    
<head>
    <title> Sample Application </title>
    <!-- insert these two lines -->
    <script type="text/javascript" src="verify.js" ></script> 
    <script type="text/javascript" src="filename.js" ></script>
</head>    
<body>
     <h1 style="text-align:  left">Test</h1>
    <div id="conversation" style="width: 600px; height: 400px; border: 1px solid #ccc; background-color: #eee; padding: 4px; overflow: scroll">
    </div>
    <form id="chatform" style="margin-top: 10px" onsubmit="return pushChat();">
       <input type="text" id="wisdom" size="80" value="" placeholder="Type your issue">
    </form>  
</body>
</html>

验证.js

 function verify() {

 }

其他.js

document.getElementById("wisdom").focus();

    function pushChat() {

        // if there is text to be sent...
        var wisdomText = document.getElementById('wisdom');
        if (wisdomText && wisdomText.value && wisdomText.value.trim().length > 0) {

            // disable input to show we're sending it
            var wisdom = wisdomText.value.trim();
            wisdomText.value = '';
            wisdomText.locked = false;

            showRequest(wisdom);                
            // send it to the Lex runtime
            botaction(wisdom);
        }
        // we always cancel form submission
        return false;
    }                   

    function botaction(action){

    console.log("action: " + JSON.stringify(action));

    switch (action.intentName) {
    case "details":
        var Id      =   action.userid;
        var arguments   = [Id];
        verify(arguments);
        break;


    default:
        console.log('No action  found.');
        console.log('executing the default action based on response');
        break;
        }           
    }

【讨论】：

【解决方案2】：

您可以将函数复制粘贴到 .js 文件（例如：verifys.js）并使用

将 .js 文件包含在 HTML 中

【讨论】：

我可以这样做..但我想在特定点调用 verify.js...我只是不希望它简单地加载它
如果你需要从 HTML 调用一个 JS 函数，它应该被预先包含。旧浏览器允许动态包含脚本。但是现代浏览器不允许使用 document.CreateElement('Script'..) 注入脚本标签。如果您不想预先加载函数，请将函数转换为服务器端服务并在需要时调用它。