V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
qiubangzhu
V2EX  ›  程序员

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

  •  1
     
  •   qiubangzhu · 2022-08-14 21:48:07 +08:00 · 5136 次点击
    这是一个创建于 592 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    咋写?

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

    27 条回复    2022-08-17 00:30:08 +08:00
    ink19
        1
    ink19  
       2022-08-14 21:55:10 +08:00
    js 没办法跨域吧。。。感觉写不了
    Moeyua
        2
    Moeyua  
       2022-08-14 21:55:12 +08:00 via iPhone
    如果不考虑重定向等等问题的话,可以直接像该地址用 Ajax 发送 Get 请求,如果返回的 HTTP code 是 200 就说明页面能够正常访问。
    qiubangzhu
        3
    qiubangzhu  
    OP
       2022-08-14 21:58:55 +08:00
    @ink19 用啥能实现,不要后台的情况下
    wenzichel
        4
    wenzichel  
       2022-08-14 22:01:34 +08:00
    纯前端存在跨域的问题,肯定没法实现,只能借助于后端了,把将要跳转的地址发给你们后端接口,后端去请求这个地址的数据,若能正常请求,则告诉前端可以跳转,否则不能跳转。
    autoxbc
        5
    autoxbc  
       2022-08-14 22:02:50 +08:00   ❤️ 1
    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
        6
    youbaoer  
       2022-08-14 22:29:17 +08:00 via Android
    maggch97
        7
    maggch97  
       2022-08-14 22:40:45 +08:00
    跨域问题就用 iframe ,readyState
    pytth
        8
    pytth  
       2022-08-14 22:50:14 +08:00 via iPhone
    要用后端来获得请求头。
    xiaoz
        9
    xiaoz  
       2022-08-14 23:36:22 +08:00 via Android
    2 楼办法是可行的,比如 jquery 的 ajax 就可以发起一个请求,只获取 head 头,然后根据状态码判断。3xx 以下视为正常,大于 4xx 或超时视为异常。
    beastk
        10
    beastk  
       2022-08-15 00:19:38 +08:00 via iPhone
    请求资源文件呗,img css js ,然后判断加载
    MossFox
        11
    MossFox  
       2022-08-15 00:55:41 +08:00   ❤️ 5
    我不知道合不合理,如果有问题的话麻烦指出下

    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
        12
    MossFox  
       2022-08-15 00:57:57 +08:00
    描述里面不清楚指的是 "**用户**能否访问目标网址" 还是 "目标网址的服务当前是否可用"。如果是前者,上面那个方案可以试试,否则的话会需要有后端参与。
    Slshaolong
        13
    Slshaolong  
       2022-08-15 01:04:20 +08:00 via Android
    可以去试试请求这个网页的一张图片
    然后用 onload 试试

    一般这样的话我就写后端了
    a90120411
        14
    a90120411  
       2022-08-15 02:25:45 +08:00
    #11 的方法是可行的。
    yitalin
        15
    yitalin  
       2022-08-15 03:46:51 +08:00 via iPhone
    昨天刚做了个类似的,测试网页连接速度
    http://speedtest.im/news.html
    flymeto
        16
    flymeto  
       2022-08-15 03:56:33 +08:00
    @yitalin 大哥就这个就这个 怎么实现的呢 我看别的类似的都太粗糙而且不准确
    hxy100
        17
    hxy100  
       2022-08-15 07:08:04 +08:00
    @yitalin 不是所有网址都能这样操作,除非对方服务器返回了允许跨域的 HTTP 标头;
    ---
    zhuweiyou
        18
    zhuweiyou  
       2022-08-15 09:06:47 +08:00
    哪怕楼上的方案可行,这个需求仍然不合理.
    直接页面放多个链接,入口 1XX, 入口 2YY, 让用户自己去点得了
    hgc81538
        19
    hgc81538  
       2022-08-15 10:21:47 +08:00 via iPhone   ❤️ 1
    跟 5 樓一樣用圖片檢查,但用
    https://www.baidu.com/favicon.ico

    檢測 img onload, onerror
    wangxiaoaer
        20
    wangxiaoaer  
       2022-08-15 10:25:43 +08:00
    检查对应网站的相对固定图片是最靠谱的了。

    有些提到借助后端的,这种也不靠谱:后端和前端的连通性是不一样的,后端能访问不代表前端可以。
    yitalin
        21
    yitalin  
       2022-08-15 11:54:25 +08:00
    @flymeto 查看源码就行 没加密
    @hxy100 报错不允许跨域也是连接上了才会受到错误,所以只管能连接就行
    lisongeee
        22
    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
        23
    qiubangzhu  
    OP
       2022-08-15 15:02:13 +08:00
    @lisongeee 这个咋用 直接复制粘贴到.js 文件里面就行了吗?我直接复制粘贴进去(.js 文件里面原本没有任何代码) 无法自动跳转
    hxy100
        24
    hxy100  
       2022-08-15 16:39:23 +08:00
    @yitalin 并不是啊,我测试过,一是用一个没有有效解析的假域名,二是用一个访问正常,但不允许跨域的网站,两种情况测试下来收到的 status 都是 error ,并不能有效区分;
    ruoduan
        25
    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
        26
    yitalin  
       2022-08-15 18:08:35 +08:00
    @hxy100 不是用 status 来判断的,我是用的 complete
    hxy100
        27
    hxy100  
       2022-08-17 00:30:08 +08:00
    @yitalin 我说的就是你 complete 函数中的 status 参数,我是用你的代码克隆下来测试的,确实有问题,你可以自己试试;
    ---
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5338 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 05:52 · PVG 13:52 · LAX 22:52 · JFK 01:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.