7 .H5 新增API

最新推荐文章于 2024-05-22 09:15:15 发布

青春如梦952

最新推荐文章于 2024-05-22 09:15:15 发布

阅读量78

点赞数

分类专栏： H5C3篇文章标签： php 开发语言

本文链接：https://blog.csdn.net/qq_69946766/article/details/132481364

版权

H5C3篇专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. Location对象

location 对象包含有关当前 URL 的信息

location 对象是 window 对象的一部分，可通过window.location属性对其进行访问。

属性

名称	释义
origin	返回页面来源的域(当前协议 + 主机名+端口号)
host	返回一个URL的主机名和端口
hostname	返回URL的主机名
port	返回一个URL服务器使用的端口号
pathname	返回的URL路径名。
protocol	返回一个URL协议
href	返回完整的URL
hash	返回从井号 (#) 开始的 URL（锚）
search	返回从问号 (?) 开始的 URL（查询部分）

方法

属性	描述
assign()	加载新的文档。跟href一样，可以跳转页面
replace()	用新的文档替换当前文档。替换当前页面，不记录历史，不可以后退
reload()	重新加载当前文档。

2.Navigator对象

改成自己的key即可

下面前端代码可以判断用户那个终端打开页面，实现跳转。

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //跳转到手机端的页面
 } else {
    window.location.href = "";     //跳转到pc端的页面
 }

2.2 Navigator.onLine网络状态

onLine 属性是一个只读的布尔值，声明了系统是否处于脱机模式，如果系统属于脱机状态，则返回 false，否则返回 true。

if (navigator.onLine) {
  alert('online')
} else {
  alert('offline');
}

HTML5 也给我们提供了2个事件 online 和 offline，给window绑定事件--检测网络开始状态

window.ononline = function() {
    console.log('你的浏览器在线工作');
};
window.onoffline = function() {
    console.log('你的浏览器离线工作');
}

3. History对象

方法	描述
back()	加载 history 列表中的上一个 URL。
forward()	加载 history 列表中的下一个 URL。
go()	加载 history 列表中的某个具体页面。其中go()参数为正值前进,参数为负值后退,为0刷新页面
pushState()	用于在历史中添加一条记录。
replaceState()	用来修改 History 对象的当前记录，其他都与pushState()方法一模一样。

属性	描述
length	返回浏览器历史列表中的 URL 数量。
state	返回浏览器在当前 URL 下的状态信息，如果没有调用过 pushState() 或 replaceState() 方法，则返回默认值 null。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="back">back</button>
    
    <button class="forward">forward</button>
    <button class="go">go</button>
    <a href="./1-4 location 的方法.html">1-4</a>
    <a href="http://www.4399.com">4399</a>
    <script>
        // 历史包含了用户在浏览当中访问过的 记录
        console.log(window.history);

        // 返回浏览器历史列表中URL数量
        console.log(history.length);

        // 返回浏览器在当前URL 下的状态 ,如果没有调用过 pushState()  和replaceState()方法 ,则默认返回null
        console.log(history.pushState);

        var back=document.querySelector('.back');
        var forward=document.querySelector('.forward');
        var go=document.querySelector('.go');

        back.onclick =function(){
            // 返回历史列表当中的上一个访问记录
            // 跳转页面
            history.back();
        }

        forward.onclick =function(){
            // 加载历史列表当中的下一个
            history.forward();
        }

        // 加载 history 列表中的某个具体页面。其中go() 参数为正值前进，参数为负值后退，为0刷新
        go.onclick = function (){
            // 刷新页面
            // history.go(0);

            // 前进
            history.go(1);

            // 后退
            // history.go(-1);

        }

         // 用于在当前历史记录当中添加一个记录
        // history.pushState();
        // 用来修改 History 对象的当前记录，其他都与pushState()方法一模一样。
        // history.replaceState();


          // ctrl + shift + T 恢复之前关闭的标签页

        //   try
        // 把您觉得可能会报错的代码放在try 里面
        // catch里面会给你返回错误的结果
        try{
            console.log(a);
        }catch(error){
            console.log(111)
        }

        console.log(1+2);

    </script>
</body>
</html>

4. Files对象(文件读取)

HTML5新增内建对象，可以读取本地文件内容。

var reader = new FileReader(); 可以实例化一个对象

实例方法

1、reader.readAsDataURL()：DataURL形式读取文件

2、reader.readAsText()：读取文件根据特殊的编码格式转化为内容(字符串形式)

事件监听

onload 当文读取完成时调用

属性

reader.result 文件读取结果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <input type="file" class="files">
    <img src="" alt="" class="img">
    <script>
        var elefiles = document.querySelector('.files');
        var _img = document.querySelector('.img');

        // 给传入事件实时监控
        elefiles.onchange = function () {

            // value 返回的是路径
            console.log(this.value);    //C:\fakepath\bz3.jpg
            // 当我们改图片的位置，则路径也会更改

            console.log(this.files);

            console.log(this.files);

            // 创建实例化对象
            var redder = new FileReader();

            console.log(redder);

            // reader.readAsDateURL():DataURL形式读取文件

            redder.readAsDataURL(this.files);

            // console.log(redder.readAsDataURL(this.files));

            reader.readAsDataURL(this.files[0])

            // 当文件读取完成时进行显示图片结果
            reader.onload = function () {
                console.log(reader.result);
                console.log(123);
                _img.style.display = "block";
                _img.src = reader.result;
            }
        }

        // 1.给文件控件input 添加事件监听 监听内容的改变
        // 2.创建文件读取的 对象 new FileReader();
        // 3.使用readAsDataURL读取用户上传的this.files[0]
        // 4.当读取完成之后 _img.src = reader.result; 完成缩略图展示

    </script>
</body>

</html>