利用 onload 事件，完成各终端页面适配持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情

前言

在日常开发中，可能会遇见适配多种类型终端的需求。本文就记录了如何利用 onload 事件，完成各终端页面适配。

思路

利用onload 事件会在页面或图像加载完成后执行的特点，结合UserAgent判断终端类型，然后通过window.location.href 跳转到对应适配的页面。

onload 事件

onload 事件会在页面或图像加载完成后执行。

通常用在 body 元素上：

    <body onload="init()">  
    </body>

判断终端类型

要了解某个网站是在移动设备上打开的还是在pc web浏览器中打开的，我们可以通过判断Request.UserAgent中的具体信息来分析判断；

因为UserAgent包含了很多的信息，我们可以根据其中的某些信息来进行判断；

在控制台中输入navigator.userAgent查看浏览器信息：

然后根据这些信息，再结合正则表达式我们就可以判断出终端类型。

    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {  //判断iPhone|iPad|iPod|iOS
        console.log(iPhone|iPad|iPod|iOS);  
    }
    else if (/(Android)/i.test(navigator.userAgent)) {          //判断Android
        console.log(Android); 
    }
    else {                                                      //pc
        console.log("pc");
    };

页面跳转

window.location.href 属性用于返回当前页面的 href (URL)；

在js中，经常使用window.location.href跳转页面。

例如：跳转到适配pc端页面：

    window.location.href = "./pc/index.html";

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- onload 事件会在页面或图像加载完成后执行 -->
<body onload="init()">  
</body>
</html>
<script>
    function init() {
        if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {  //判断iPhone|iPad|iPod|iOS
            window.location.href = "./iPhone/index.html";
            // console.log(navigator.userAgent);  
        }
        else if (/(Android)/i.test(navigator.userAgent)) {          //判断Android
            window.location.href = "./Android/index.html";
            // console.log(navigator.userAgent); 
        }
        else {                                                      //pc
            window.location.href = "./pc/index.html";
            // console.log("pc");
        };
    }
</script>

本文到此结束

如果大家还有什么其他想法，欢迎在评论区交流！