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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 1444 天前的主题，其中的信息可能已经有所发展或是发生改变。

前端基本不懂也没用框架
一个脚本在 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();
}

xxx:15 Uncaught ReferenceError: jinshen is not defined
    at HTMLButtonElement.onclick (xxx:15)

也会这样报错

Uncaught SyntaxError: Unexpected token '<'

网上搜了一下也找不出个所以然来这问题原因出在哪里呢？

46 条回复 • 2020-12-31 14:32:56 +08:00

luob

2020-12-29 22:15:00 +08:00 via iPhone

你的 js 路径写错了

AmrtaShiva

2020-12-29 22:20:33 +08:00 via iPhone

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

ljpCN

2020-12-29 22:58:47 +08:00 via iPhone

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

AmrtaShiva

2020-12-29 23:03:43 +08:00

@ljpCN network-->ALL Status 都是 200

AmrtaShiva

2020-12-29 23:05:16 +08:00

@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

2020-12-29 23:20:10 +08:00

Content-Type: text/html

forzalianjunting

2020-12-29 23:20:48 +08:00

Content-Type 有问题

AmrtaShiva

2020-12-29 23:36:52 +08:00 via iPhone

@forzalianjunting 这怎么改有办法吗？

flyhaozi

2020-12-29 23:42:13 +08:00

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

AmrtaShiva

2020-12-29 23:46:39 +08:00

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

turan12

2020-12-29 23:47:50 +08:00

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

AmrtaShiva

2020-12-30 00:11:12 +08:00

@turan12 加了也不行.....

flyhaozi

2020-12-30 00:16:41 +08:00

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

AmrtaShiva

2020-12-30 00:23:13 +08:00

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

flyhaozi

2020-12-30 00:46:52 +08:00

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

ss098

2020-12-30 03:31:44 +08:00

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

AmrtaShiva

2020-12-30 03:36:26 +08:00 via iPhone

@ss098 head 里面引用也不行晕

ss098

2020-12-30 03:38:42 +08:00

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

AmrtaShiva

2020-12-30 04:19:44 +08:00

@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

2020-12-30 05:04:37 +08:00 via iPhone

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

AmrtaShiva

2020-12-30 06:02:24 +08:00

@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

2020-12-30 09:00:08 +08:00

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

mywaiting

2020-12-30 09:06:54 +08:00

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

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

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

mx1700

2020-12-30 09:32:17 +08:00 via Android

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

cw2k13as

2020-12-30 09:47:25 +08:00

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

cw2k13as

2020-12-30 09:49:45 +08:00

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

JerryCha

2020-12-30 11:14:47 +08:00

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

AmrtaShiva

2020-12-30 13:45:20 +08:00 via iPhone

@cw2k13as 29 楼已经写了

AmrtaShiva

2020-12-30 13:46:00 +08:00 via iPhone

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

AmrtaShiva

2020-12-30 13:46:42 +08:00 via iPhone

@mx1700 没看懂😂

mx1700

2020-12-30 13:54:07 +08:00 via Android

WishMeLz

2020-12-30 14:08:44 +08:00

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

ljpCN

2020-12-30 14:09:36 +08:00 via iPhone

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

AmrtaShiva

2020-12-30 14:18:27 +08:00

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

zhoushiya

2020-12-30 14:23:48 +08:00

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

ciddechan

2020-12-30 14:27:21 +08:00

window.onload 后执行

AmrtaShiva

2020-12-30 14:32:58 +08:00

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

AmrtaShiva

2020-12-30 14:39:32 +08:00

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

AmrtaShiva

2020-12-30 14:41:16 +08:00

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

source

2020-12-30 15:05:24 +08:00

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

2020-12-30 15:55:12 +08:00 via iPhone

异步吧，整定时器更新

AmrtaShiva

2020-12-30 16:41:11 +08:00

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

jay4497

2020-12-30 17:30:07 +08:00

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

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

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

AmrtaShiva

2020-12-30 17:34:57 +08:00

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

jay4497

2020-12-30 18:04:49 +08:00

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

AmrtaShiva

2020-12-31 14:32:56 +08:00 via iPhone

@jay4497 搞不定了....😅

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

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