未分類
29 12 月 2020

同一个脚本放在 body 里面可以运行 放到外部 js 文件报错

同一个脚本放在 body 里面可以运行 放到外部 js 文件报错

資深大佬 : AmrtaShiva 6

  • 前端基本不懂 也没用框架
  • 一个脚本在 Body 里面可以正常运行
 function jinshen() {     var request = new XMLHttpRequest();     request.onreadystatechange = function () {         if (request.readyState === 4 && request.status === 200) {             var info = request.responseText;             var js = JSON.parse(info);              var j1 = js.JinShen1;             var j2 = js.JinShen2;             var j3 = js.JinShen3;             var jinsheninfo = j1 + "<br>" + j2 + "<br>" + j3;              var p = document.getElementById("y1");             p.innerHTML = jinsheninfo;          };     };     // 发送请求:     request.open('POST', '/xxx', true);     request.send(); }
  • 放到外部 js 文件目录里面就报错
xxx:15 Uncaught ReferenceError: jinshen is not defined     at HTMLButtonElement.onclick (xxx:15)
  • 也会这样报错
Uncaught SyntaxError: Unexpected token '<' 
  • 网上搜了一下也找不出个所以然来 这问题原因出在哪里呢？
大佬有話說 (46)

  • 資深大佬 : luob

    你的 js 路径写错了

  • 主 資深大佬 : AmrtaShiva

    @luob src=“js/xxx.js”不是这样吗？ js 目录在项目根目录下

  • 資深大佬 : ljpCN

    检查控制台 network，看看 js 文件有没有正常请求到

  • 主 資深大佬 : AmrtaShiva

    @ljpCN network–>ALL Status 都是 200

  • 主 資深大佬 : AmrtaShiva

    @ljpCN
    这是请求到了吧
    “`
    Request URL: http://127.0.0.1:9090/js/yiji.js
    Request Method: GET
    Status Code: 200 OK
    Remote Address: 127.0.0.1:9090
    Referrer Policy: no-referrer-when-downgrade
    Content-Type: text/html; charset=utf-8
    Date: Tue, 29 Dec 2020 15:03:06 GMT
    Transfer-Encoding: chunked
    Accept: */*
    Accept-Encoding: gzip, deflate, br
    Accept-Language: en-US,en;q=0.9,zh-CN;q=0.8,zh;q=0.7
    Connection: keep-alive
    Cookie: remember_web_59ba36addc2b2f9401580f014c7f58ea4e30989d=eyJpdiI6Im9sWWFhdTNTOWpCTFlPV2J0SHV6NXc9PSIsInZhbHVlIjoiUnJBbUtwS2VsRW11aXZTNkJEeFVQWWd2SmFZT1lHRURIVzRQN1VzUUxOQVwvM2dKYVQ2N0VCUURHcGVOdDJROVdyZzFldkdOaDcycDQ3ZDhqVStxcFVZaFV4U0N2S0lYSjg1K0djcXp6TE9INDFVZzZ3cVZNbWQzMFZNTXdCZlZMSTZzTVY3OFZDV0VqXC85SG1vUnhReExnVVwvRUVrYmdWK0ZFUHdpYk40T0FrYzRtd01vRlJmbnRpUkViNEtBV2hIIiwibWFjIjoiNzQxMTY1N2RmMDFhNzBkYmQyMjRkMzY2MTlkZjMwY2I2OGVkZGQ2YTlmYmJmOGZlNDIyMjg1ZjYyOGEzNWY0NyJ9; CSRF-Token-PBX43=MbUAFxPTqikYRgErQScXUuRFLe4XAijK; PHPSESSID=7v3dn9n3efn6h797en57n3n19u; _ga=GA1.1.30054837.1559550150; counter=181
    dnt: 1
    Host: 127.0.0.1:9090
    Referer: http://127.0.0.1:9090/ccal
    Sec-Fetch-Dest: script
    Sec-Fetch-Mode: no-cors
    Sec-Fetch-Site: same-origin
    sec-gpc: 1
    User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36
    “`

  • 資深大佬 : forzalianjunting

    Content-Type: text/html

  • 資深大佬 : forzalianjunting

    Content-Type 有问题

  • 主 資深大佬 : AmrtaShiva

    @forzalianjunting 这怎么改 有办法吗？

  • 資深大佬 : flyhaozi

    就第二个错误来看，像是 js 里不小心混进 html 代码了

  • 主 資深大佬 : AmrtaShiva

    @flyhaozi js 代码就是上面帖的这个…

  • 資深大佬 : turan12

    加一句 request.setRequestHeader(“Content-type”,”application/json”);

  • 主 資深大佬 : AmrtaShiva

    @turan12 加了也不行…..

  • 資深大佬 : flyhaozi

    @AmrtaShiva 看一下上面请求的 response 内容和原本的 js 文件一样吗？

  • 主 資深大佬 : AmrtaShiva

    @flyhaozi 不一样 network-All-Response 里面是另一个 html 页面的内容

  • 資深大佬 : flyhaozi

    @AmrtaShiva 那这应该是 web 服务器的问题，具体要看你静态文件服务器是什么、怎么配置的了

  • 資深大佬 : ss098

    无关 Content Type，据我分析是 DOM 未加载完成就调用了这个 jinshen 函数，提升引用外部 script 在页面中的顺序即可。

  • 主 資深大佬 : AmrtaShiva

    @ss098 head 里面引用也不行 晕

  • 資深大佬 : ss098

    @AmrtaShiva 提供的信息不够，也可以把 HTML 结构贴出来。

  • 主 資深大佬 : AmrtaShiva

    @ss098
    <!DOCTYPE html>
    <html lang=”en”>

    <head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <title>吉凶宜忌</title>
    </head>

    <body>

    <a href=”/”> <button onchange=”home()”><b>返回主界面</b></button></a>
    <div id=”btn” style=”text-align: center;”>
    <button id=”btny1″ onclick=”jinshen()”>金神</button>
    </div>
    <div id=”ym” style=”text-align: left;”>
    <p id=”y1″></p>
    </div>

    <script type=”text/javascript” src=”js/yiji.js”>
    /* function jinshen() {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
    if (request.readyState === 4 && request.status === 200) {
    var info = request.responseText;
    var js = JSON.parse(info);

    var j1 = js.JinShen1;
    var j2 = js.JinShen2;
    var j3 = js.JinShen3;
    var jinsheninfo = j1 + “<br>” + j2 + “<br>” + j3;

    var p = document.getElementById(“y1”);
    p.innerHTML = jinsheninfo;

    };
    };
    // 发送请求:
    request.open(‘POST’, ‘/ccal’, true);
    request.send();
    } */
    function home() {
    window.open(“/”)
    }
    </script>
    </body>

    </html>

  • 資深大佬 : ljpCN

    看一下 js 文件请求的返回内容，是不是你的 js 文件内容。控制台 network 标签页，js 文件的请求，点进去看 preview

  • 主 資深大佬 : AmrtaShiva

    @ljpCN
    func main() {
    flag.Usage = func() {
    fmt.Println(“usage ccal-web -l port”)
    flag.PrintDefaults()
    }
    p := flag.Int(“l”, 9090, “”)
    flag.Parse()

    fmt.Println(“https://github.com/Aquarian-Age/ccal-gui/tree/master/web 下载 webUI 页面”)

    http.HandleFunc(“/”, home)
    http.HandleFunc(“/ccal”, yiJi)
    http.HandleFunc(“/today”, todayInfo)
    http.HandleFunc(“/jz60”, selectlist)

    port := fmt.Sprintf(“:%d”, *p)
    err := http.ListenAndServe(port, nil)
    if err != nil {
    log.Fatal(“ListenAndServe: “, err)
    }
    }
    yiji.js 文件请求的竟然是主页页面 而不是 ccal 页面…..

  • 資深大佬 : mostkia

    Uncaught SyntaxError: Unexpected token ‘<‘
    这个报错有时候可能是你引用的 js 包的 src 地址为空导致的。建议检查一下看看有没有引用外部的 script 标签里的 src 是空的，这个错误没法靠调试查出问题

  • 資深大佬 : mywaiting

    同一个脚本放在 body 里面可以运行 放到外部 js 文件报错

    不看代码，盲猜你的这段 JS 代码应该使用 DOMContentLoaded 事件在页面加载完成再触发

    简单点就是把你的这个函数放 window.onload = function(){ xxxxxxxxxxxxx } xxxxx 就是你的代码

  • 資深大佬 : mx1700

    外部引用的 script 标签内部不要放任何东西，其他 js 再写一个没有外部引用的 script 标签放进去

  • 資深大佬 : cw2k13as

    Content-Type: text/html; charset=utf-8 ；你这个有点问题吧

  • 資深大佬 : cw2k13as

    @cw2k13as network 》 yiji.js 》 response 里面看看返回的什么

  • 資深大佬 : JerryCha

    1. 先调试一下路由，确保确实能请求到 js 文件
    2. 保证 js 脚本在页面加载完成后运行

  • 主 資深大佬 : AmrtaShiva

    @cw2k13as 29 已经写了

  • 主 資深大佬 : AmrtaShiva

    @JerryCha 两个没发现问题 因为就一个路由

  • 主 資深大佬 : AmrtaShiva

    @mx1700 没看懂

  • 資深大佬 : mx1700

    <script type=”text/javascript” src=”js/yiji.js”>这里不要放任何东西</script>

  • 資深大佬 : WishMeLz

    script 标签在使用外链的时候，里面别放东西，在写一个 script 标签。顺序也很重要

  • 資深大佬 : ljpCN

    @AmrtaShiva 那应该的确是你的请求路径有问题，web 服务器找不到于是 fallback 到 index.html 了。最好找个身边的人现场帮你看吧，这样排查效率太低了。

  • 主 資深大佬 : AmrtaShiva

    @ljpCN 我只能在这里问了 谢谢你的回复

  • 資深大佬 : zhoushiya

    script 既然已经外链了，怎么<script></script>之间还写 js 代码？

  • 資深大佬 : ciddechan

    window.onload 后执行

  • 主 資深大佬 : AmrtaShiva

    @JerryCha main 函数 http.HandleFunc(“/ccal”, yiJi) 改为 http.HandleFunc(“/yiji”, yiJi)之后打开浏览器还是请求到了 http://127.0.0.1:9090/ccal 的页面….这是路由不对了?

  • 主 資深大佬 : AmrtaShiva

    @AmrtaShiva 上面这个原因找到了 是 home.html 里面定义了跳转链接 把这个跳转链接写成 ccal 了 脚本外部执行问题还是不行

  • 主 資深大佬 : AmrtaShiva

    @zhoushiya 那个是之前写的 因为不知道原因在那儿 而且这方面也不懂 就一边琢磨一边看

  • 資深大佬 : source

    xxx:15 Uncaught ReferenceError: jinshen is not defined
    body 中能跑，外部引用 js 报错，这个应该是因为执行顺序的问题，外部 js 脚本需要 html 解析完后才开始请求，此时 onclick 绑定的 jinshen 方法还没有声明，解决方法参考 @mywaiting #23 @ciddechan #36 在你的业务代码外部包 onload 即可。

    Uncaught SyntaxError: Unexpected token ‘<‘
    语法解析错误没法精确定位，但是根据描述，可能是服务端没有正确返回请求的 js，返回了一个兜底的 html 。需要你手动排查一下。

    <script type=”text/javascript” src=”js/yiji.js”>// 业务代码 balabala</script>
    script 标签不要同时指定 src 属性又在内部书写 js 代码，这种情况下，内部代码会被直接忽略。

  • 資深大佬 : beastk

    异步吧，整定时器更新

  • 主 資深大佬 : AmrtaShiva

    @source 嗯 我再找找看 谢谢回复

  • 資深大佬 : jay4497

    不知道你的引用方式是不是也可行，但常规 JS 引用不都是这样么

    “`html
    <script type=”text/javascript” src=”js/yiji.js”></script>
    <script>
    // other js code
    </script>
    “`

    上边也好几个老哥说了，你可以尝试下

  • 主 資深大佬 : AmrtaShiva

    @jay4497 这样也试过 看来我还是太菜了….

  • 資深大佬 : jay4497

    @AmrtaShiva 那可以先把方法都清空，只留一行 alert 或者 console.log 之类的能看到输出的代码，如果方法能调到，那就是引用没问题了，然后就是慢慢查方法内的代码问题了。。。

  • 主 資深大佬 : AmrtaShiva

    @jay4497 搞不定了….