js 判断一个 url/网址是否能正常打开，然后跳转不同的网址，咋写？

V2EX = way to explore

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

现在注册

已注册用户请登录

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

js 判断 baidu.com 是否正常，正常就在 3 秒之后跳转到 baidu.com

不正常就不跳转，在当前页面不动

咋写？

搜过一圈，没找到能用的，本人小白一个，大佬帮忙写一个，谢谢了

正常

网址

url

判断

27 条回复 • 2022-08-17 00:30:08 +08:00

ink19

2022-08-14 21:55:10 +08:00

js 没办法跨域吧。。。感觉写不了

Moeyua

2022-08-14 21:55:12 +08:00 via iPhone

如果不考虑重定向等等问题的话，可以直接像该地址用 Ajax 发送 Get 请求，如果返回的 HTTP code 是 200 就说明页面能够正常访问。

qiubangzhu

2022-08-14 21:58:55 +08:00

@ink19 用啥能实现，不要后台的情况下

wenzichel

2022-08-14 22:01:34 +08:00

纯前端存在跨域的问题，肯定没法实现，只能借助于后端了，把将要跳转的地址发给你们后端接口，后端去请求这个地址的数据，若能正常请求，则告诉前端可以跳转，否则不能跳转。

autoxbc

2022-08-14 22:02:50 +08:00

const urls = [
'https://www.baidu.com/img/flexible/logo/pc/result.png',
'https://www.xxxxbaidu.com/img/flexible/logo/pc/result.png',
];

urls.forEach( url => {
const img = new Image();
img.onload = () => console.log(`url: ${ url }`);
img.src = url ;
} );

youbaoer

2022-08-14 22:29:17 +08:00 via Android

@Moeyua

maggch97

2022-08-14 22:40:45 +08:00

跨域问题就用 iframe ，readyState

pytth

2022-08-14 22:50:14 +08:00 via iPhone

要用后端来获得请求头。

xiaoz

2022-08-14 23:36:22 +08:00 via Android

2 楼办法是可行的，比如 jquery 的 ajax 就可以发起一个请求，只获取 head 头，然后根据状态码判断。3xx 以下视为正常，大于 4xx 或超时视为异常。

beastk

2022-08-15 00:19:38 +08:00 via iPhone

请求资源文件呗，img css js ，然后判断加载

MossFox

2022-08-15 00:55:41 +08:00

我不知道合不合理，如果有问题的话麻烦指出下

try {
// 超时时间 6s
let controller = new AbortController();
setTimeout(() => {
controller.abort();
}, 6000);

let res = await fetch("https://baidu.com/", {
mode: "no-cors",
// ↑ 这种模式 (opaque mode) 不可以获取到任何响应数据和请求头，但如果出现响应异常，依然会有错误抛出。通过这个来检查是否成功访问了目标地址
signal: controller.signal
});
// 接着是有正常响应的情况

} catch (e) {
// 失败情况 (超时或网络错误)

}

MossFox

2022-08-15 00:57:57 +08:00

描述里面不清楚指的是 "**用户**能否访问目标网址" 还是 "目标网址的服务当前是否可用"。如果是前者，上面那个方案可以试试，否则的话会需要有后端参与。

Slshaolong

2022-08-15 01:04:20 +08:00 via Android

可以去试试请求这个网页的一张图片
然后用 onload 试试

一般这样的话我就写后端了

a90120411

2022-08-15 02:25:45 +08:00

#11 的方法是可行的。

yitalin

2022-08-15 03:46:51 +08:00 via iPhone

昨天刚做了个类似的，测试网页连接速度
http://speedtest.im/news.html

flymeto

2022-08-15 03:56:33 +08:00

@yitalin 大哥就这个就这个怎么实现的呢我看别的类似的都太粗糙而且不准确

hxy100

2022-08-15 07:08:04 +08:00

@yitalin 不是所有网址都能这样操作，除非对方服务器返回了允许跨域的 HTTP 标头；
---

zhuweiyou

2022-08-15 09:06:47 +08:00

哪怕楼上的方案可行,这个需求仍然不合理.
直接页面放多个链接,入口 1XX, 入口 2YY, 让用户自己去点得了

hgc81538

2022-08-15 10:21:47 +08:00 via iPhone

跟 5 樓一樣用圖片檢查，但用
https://www.baidu.com/favicon.ico

檢測 img onload, onerror

wangxiaoaer

2022-08-15 10:25:43 +08:00

检查对应网站的相对固定图片是最靠谱的了。

有些提到借助后端的，这种也不靠谱：后端和前端的连通性是不一样的，后端能访问不代表前端可以。

yitalin

2022-08-15 11:54:25 +08:00

@flymeto 查看源码就行没加密
@hxy100 报错不允许跨域也是连接上了才会受到错误，所以只管能连接就行

lisongeee

2022-08-15 11:59:42 +08:00

#11 可以优化一下，把 try/catch 去掉

```js
let controller = new AbortController();
setTimeout(() => {
controller.abort();
}, 6000);

let isOk = await fetch("https://baidu.com/", {
mode: "no-cors",
signal: controller.signal
}).catch(()=>false);
```

qiubangzhu

2022-08-15 15:02:13 +08:00

@lisongeee 这个咋用直接复制粘贴到.js 文件里面就行了吗？我直接复制粘贴进去（.js 文件里面原本没有任何代码）无法自动跳转

hxy100

2022-08-15 16:39:23 +08:00

@yitalin 并不是啊，我测试过，一是用一个没有有效解析的假域名，二是用一个访问正常，但不允许跨域的网站，两种情况测试下来收到的 status 都是 error ，并不能有效区分；

ruoduan

2022-08-15 17:22:45 +08:00

```js
const img = new Image()
img.onload = () => { console.log('可以访问') }
img.src = `https://www.baidu.com/favicon.ico`
```

yitalin

2022-08-15 18:08:35 +08:00

@hxy100 不是用 status 来判断的，我是用的 complete

hxy100

2022-08-17 00:30:08 +08:00

@yitalin 我说的就是你 complete 函数中的 status 参数，我是用你的代码克隆下来测试的，确实有问题，你可以自己试试；
---