【无标题】

在网页F12的控制台可以直接进行js操作。

1、html调用js的三种方式

1、直接在html文件中加入代码

使用<script></script>标签

而<script>标签仅可放在body和head中

2、在html代码中引用js文件

在<script>标签中使用src

<script src="js.js"></script>

3、在标签中直接调用

如

<input type="button" name="123" onclick="alert(123)">

2、JS语法

1、通过id、name、classname来获取html元素对象

document.getElementById("id");document.getElementById("nav1").innerHTML("我才是导航");document.getElementsByName();document.getElementsByClassName(); 

2、function函数

在<script>标签中，可以通过

function 函数名("xxx",123){    return xxx;}

其中可以加入return返回值，也可以不加

声明函数

然后通过

函数名();

调用。

    <script>        function showSomething(){            alert("我是一条鱼");        }        showSomething();</script>

3、innerHTML、innerText的区别

innerHTML用于操作标签内的 html内容

//设置document.getElementById("nav1").innerHTML = "123"//获取var x = document.getElementById("nav1").innerHTML;

innerHTML则只用于操作标签内的文本内容

4、window

属性、方法

- window.innerHeight - 浏览器窗口的内部高度(包括滚动条)

- window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

- window.open() - 打开新窗口

window.open (URL, name, features, replace)

URL：可选字符串，声明在新窗口中显示网页文档的 URL

name：可选字符串，声明新窗口的名称。

features：可选字符串，声明了新窗口要显示的标准浏览器的特征

replace：可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目。

 <input type="button" value="点击" name="123" onclick="window.open('http://www.baidu.com','baidu')">

- window.close() - 关闭当前窗口

- window.moveTo() - 移动当前窗口

- window.resizeTo() - 调整当前窗口的尺寸

添加监听

window.addEventListener()；//当DOM树构建完成的时候就会执行DOMContentLoaded事件window.addEventListener("DOMContentLoaded",function(){   alert("123");});

5.console

F12控制台可见

console.log('www');console.dir('111');//json输出console.count()//代码执行次数

6.window.navigator 

返回包含访问者浏览器的信息，无需任何权限。

appCodeName返回浏览器的代码名

appMinorVersion返回浏览器的次级版本

appName返回浏览器的名称

appVersion返回浏览器的平台和版本信息

browserLanguage返回当前浏览器的语言

cookieEnabled返回指明浏览器中是否启用 

cookie 的布尔值

cpuClass返回浏览器系统的 CPU 等级

onLine返回指明系统是否处于脱机模式的布尔值。

platform返回运行浏览器的操作系统平台

systemLanguage返回 OS 使用的默认语言

userAgent返回由客户机发送服务器的 user-agent 头部的值

userLanguage返回 OS 的自然语言设置

7、onclick

    

var two_div = document.getElementsByTagName("div")[1];    //绑定点击事件  一旦单击div  立马执行function    two_div.onclick = function(){        console.log("你好!");    }

3、权限

网页权限包括：

位置信息、摄像头、麦克风、通知、后台同步、移动传感器、自动下载项、MIDI设备、USB设备、文件修改、剪切板、付款处理、设备使用情况等权限。

权限动态申请，需要用户点击授予。

也可以写代码查询是否授予权限

       

 function requestPermission() {            navigator.permissions.query({ name: 'clipboard-read' }).then(result => {                if ((result.state === 'granted' || result.state === 'prompt')) {                    const clipboard = navigator.clipboard.readText();

                }            });

        }

4、媒体

1、摄像头、麦克风

判断浏览器是否支持用户媒体设备

if(navigator.mediaDevices||navigator.mediaDevices.getUserMedia){    console("支持访问用户媒体设备");}

若支持访问用户媒体设备则可以调用媒体设备，浏览器会自动申请权限。

录像：

   

 <video id="c1" autoplay height="400dp" width="400dp"></video>    <script>        function init() {            if (navigator.mediaDevices || navigator.mediaDevices.getUserMedia) {                var v1 = document.getElementById('c1');                navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) {                    v1.srcObject = stream;                    v1.play();                })            };        }        init();</script>

2、位置信息

检查浏览器是否支持地理位置api

if ("geolocation" in navigator) {    alert("支持");}
else {    alert("很不幸！你的浏览器并不支持Geolocation API功能");}

通过navigator.geolocation.getCurrentPosition方法获取详细位置信息，自动申请权限。

        

function getGeo() {            if ("geolocation" in navigator) {                navigator.geolocation.getCurrentPosition(function success(postion){                    console.log(postion);                },function error(p){                    console.log(p);                });              }            else {                alert("很不幸！你的浏览器并不支持Geolocation API功能");            }        }        getGeo();

以下是Edge浏览器的位置信息，chrome浏览器无法正常获取。

依据ip位置获取

3、浏览器操作

经过测试该方法只能在当前url中接上一部分

history对象

back，回退到上一个网页

history.back()

forward，转到下一页

history.forward()

Go，控制前进或者倒退

history.go(-2) // 倒退 2 页history.go(2) // 前进 2 页pushState()

向浏览器的历史记录中插入一条新的历史记录。

history.pushState(state, title, url)

使用指定的数据、名称和 URL 来替换当前历史记录。

4、下载文件

a标签方式

可以通过创建一个<a>标签的download属性来下载文件

       

 function a_download() {            const elt = document.createElement('a');            elt.setAttribute('href', 'https://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=https%3A%2F%2Fimg.doc.wendoc.com%2Fpic%2F4e0088c9351d955879fbff7e%2F1-810-jpg_6-1080-0-0-1080.jpg&thumburl=https%3A%2F%2Fimg2.baidu.com%2Fit%2Fu%3D1567134997%2C852835694%26fm%3D253%26fmt%3Dauto%26app%3D138%26f%3DJPEG%3Fw%3D667%26h%3D500');            elt.setAttribute('download', 'file.png');            elt.style.display = 'none';            document.body.appendChild(elt);            elt.click();            document.body.removeChild(elt);        }

Blob方式下载

        function downloadUrlFile(url) {            url = url.replace(/\\/g, '/');            const xhr = new XMLHttpRequest();            //xhr.setRequestHeader("Access-Control-Allow-Origin", "*");            xhr.open('GET', url, true);            xhr.responseType = 'blob';            //xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA==');            xhr.onload = () => {                if (xhr.status === 200) {                    // 获取文件blob数据并保存                    var fileName = getFileName(url);                    saveAs(xhr.response, fileName);                }            };

            xhr.send();        }

        function saveAs(data, name) {            var urlObject = window.URL || window.webkitURL || window;            var export_blob = new Blob([data]);            var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')            save_link.href = urlObject.createObjectURL(export_blob);            save_link.download = name;            save_link.click();        }

        function getFileName(url) {            var num = url.lastIndexOf('/') + 1            var fileName = url.substring(num)            //把参数和文件名分割开            fileName = decodeURI(fileName.split("?")[0]);            return fileName;        }

5、清除浏览器历史记录

该方法只能将本次的浏览记录替换

       

 <button onclick="replaceDocument()">replace</button>        function replaceDocument(){            window.location.replace('https://www.coder.work/article/6494569');            return false;        }