H5ke13-1浏览器处理异常

白天的我最菜

已于 2023-12-08 14:04:29 修改

阅读量806

点赞数 17

文章标签： javascript 前端开发语言

于 2023-12-06 21:57:07 首次发布

本文链接：https://blog.csdn.net/m0_72735063/article/details/134832535

版权

1不让错误返回 js错误

2error只能在try,catch这里面用

3. 只要在我们的这个浏览器不同页面都共用同一个window,窗口

4父子窗口

5发送的数据,也是在打开的窗口上面 ,图1

6每一个事件都是一个钩子,注册很多事件的话会降低性能,叫事件委托,每一个事件委托是由冒泡来实现]我们可以直接在div里面实现事件

7后面就是我们的es6,就是我们的e2015,es6

8下节课,脱饭,做饭.:随便一个文件放到浏览器就会呈现出来

一.window对象的error事件没有event对象,不能用第一种了
// window.addEventListener("error",funtion(msg,url,line){
                window.οnerrοr=function(msg,url,line){

window对应的error他接收三个参数,msg,url,行号

return false

二return true就不报红了

异步（Asynchronous）指的是不按照代码的顺序，立即执行下一步操作的能力。在JavaScript中，异步编程通常涉及到回调函数、Promise、async/await等概念。

但是你提到了"return true"并给服务器返回一个true的异步结果。这个行为是异步的，意味着在执行这个操作的时候，代码的其他部分（例如try/catch块中的内容）可以继续执行，而不必等待这个操作完成。

1不让错误爆红

如代码1,放在文章最底下

看到我们的错误类型

2error只能在try,catch这里面用

就可以传到客户端那边

3. 只要在我们的这个浏览器不同页面都共用同一个window

<a href="b.html">链接到b</a>就是直接跳转到b.html

三.点击就把我这个window.name给改变

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <a href="b.html">链接到b</a>
        <input type="button" value="print">
        <script>
            window.name = "zhangsan";
            let btn = document.querySelector("input");
            btn.addEventListener("click", (event) => {
                alert(window.name);
                window.name = "lisi";
            })
        </script>

    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <a href="a.html">链接到a</a>
        <input type="button" value="print">
        <script>
            let btn=document.querySelector("input");
            btn.addEventListener("click",(event)=>{
                alert(window.name);
            })
        </script>

    </body>
</html>

嘿嘿我打印JSON字符串,JSON.stringify(data)

<body>
    <a href="b.html">链接到b</a>
    <input type="button" value="print">
    <script>
        let data={
            name:"zhangsan",
            age:18,
            gender:"female"
        }
        window.name = JSON.stringify(data);
        let btn = document.querySelector("input");
        btn.addEventListener("click", (event) => {
            alert(window.name);
            window.name = "lisi";
        })
    </script>

</body>

当然JSON.parse(window.name)可以转为JS对象

4父子窗口概念111

四.父窗口是什么,上上一个页面打开来的,..没上一个窗口就没有子窗口

window.open("child.html","_self");在自己窗口打开_blank,,除了这两个就是在打开的窗口设置window.name

window.open("child.html","child_win11","left=100,top=200,width=600,height=400")打开一个小东西,没有地址栏,侧边栏

现在我打开也可以关闭

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>

    <body>
    <h1>parent.html</h1>
   <input type="button" value="open">
   <input type="button" value="close">
        <script>
            let btn_open=document.querySelector("input[value=open]");
            let btn_close=document.querySelector("input[value=close]");
            let child_handler;
            btn_open.addEventListener("click",event=>{
                // window.open("child.html","_self");
                child_handler=window.open("child.html","child_win11","left=100,top=200,width=600,height=400")
            })
            btn_close.addEventListener("click",event=>{
                // window.open("child.html","_self");
                child_handler.close();
            })
        </script>





    </body>
</html>

子窗口可以打印父窗口的东西,父窗口是什么,上上一个页面打开来的,..没好友上一个窗口就没有子窗口

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
<h1>child.html</h1>
        <input type="button" value="button">
        <script>
            document.querySelector("input").addEventListener("click",(event=>{
                console.log(window.opener);
                console.log(window.opener.document.body.innerHTML);
            }))
        </script>



    </body>
</html>

5发送的数据,也是在打开的窗口上面

父窗口open,close,send按钮,开子窗口,关闭,发送给子窗口数据

子窗口,按钮,发送给父窗口数据

讲解:发送给子窗口数据,同时子窗口也会给父窗口数据,子父窗口都会有message事件. 代码3,4

发送数据的事件是window 的,按钮事件是按钮事件

五.写一个捕获父元素,再捕获父元素里面的子元素,就是一个数组了,用switch来

六.为什么用event.target获得点击的对象,准确

再打开的窗口上面,发送数据,子窗口接收,图2

console.log(event.origin)是打印源,http://localhost:63342

event.source.postMessage("我是子窗体发送的数据");//发送信息给父窗体

6每一个事件都是一个钩子,注册很多事件的话会降低性能,叫事件委托,每一个事件委托是由冒泡来实现]我们可以直接在div里面实现事件

先捕捉父元素,之后再父元素的子元素,这样字就只有一个钩子,后面一个个switch(),大大滴提高我们的性能

7后面就是我们的es6,就是我们的e2015,

类在java如何看es6是怎么弄的有什么区别

看如果es6没有访问修饰符,不用let,构造器用construct

constructor(name,gender,salary) {
    this._gender=gender;
    this._name=name;
    this._salary=salary;
}用这些get,set不需要括号

_就是private

使用的时候自动调用get

设置的时候自动调用set

不支持2个构造函数

构造器:在堆上分布内存,this指向这个内存,执行,返回

问题:e.salary自动调用get,那我

8下节课,脱饭,做饭.:随便一个文件放到浏览器就会呈现出来

代码1

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>

        <script>
            // window.addEventListener("error",funtion(msg,url,line){
                window.onerror=function(msg,url,line){
                    console.log(msg);
                    console.log("=========");
                    console.log(url);
                    console.log("=========");
                    console.log(line);

            return true;
                    // return true;// 或者return一个true异步给服务器,这样用户就看不到错误信息了

            };
                let obj=null;
             try{
                 let div=document.getElementById("div#out");
                 div.innerHTML="Hello World";
             }catch(error){
                 obj=error;
                 if(error instanceof DOMError)
                 console.log(error+"1");
                 if(error instanceof RangeError)
                     console.log(error+"2");
                 if(error instanceof TypeError)
                     console.log(error+"3");
                 else
                     console.log(error+"4");
             }finally {
                 if(obj){
                     // 就可以写到客户端那边
                 }
             }


        </script>

    </body>
</html>

代码二

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>

    <body>
        <h1>parent.html</h1>
<!--        <input type="button" value="open">-->
<!--        <input type="button" value="close">-->
<!--        <input type="button" value="send data">-->
        <div id="wrapper">
            <input type="button" value="open">
            <input type="button" value="close">
            <input type="button" value="send data">
        </div>
        <script>
            window.name = "父窗体";
            let child_handler=null;
            // let btn_open=document.querySelector("input[value=open]");
            // let btn_close=document.querySelector("input[value=close]");
            // let btn_send=document.querySelector("input[value='send data']");
            let wrapper = document.querySelector("#wrapper");
            wrapper.addEventListener("click", (event) => {
                let all_btn = document.querySelectorAll("#wrapper input");
                switch (event.target) {
                    case all_btn[0]:
                        child_handler = window.open("child.html", "child_win11", "left=100,top=200,width=600,height=400")
                        break;
                    case all_btn[1]:
                        child_handler.close();
                        break;
                    case all_btn[2]:
                        child_handler.postMessage("我是父窗体发送的数据");

                }

            });


            // btn_open.addEventListener("click",event=>{
            //     // window.open("child.html","_self");
            //     child_handler=window.open("child.html","child_win11","left=100,top=200,width=600,height=400")
            // })
            //
            // btn_close.addEventListener("click",event=>{
            //     // window.open("child.html","_self");
            //     // child_handler.close();
            //     child_handler.close();
            // })
            //
            // btn_send.addEventListener("click",event=>{
            //     child_handler.postMessage("我是父窗体发送的数据");
            // })


            //接收,接收到了
            window.addEventListener("message", (event) => {
                console.log(event.data)

            })
        </script>


    </body>
</html>

代码3

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>

    <body>
        <h1>parent.html</h1>
<!--        <input type="button" value="open">-->
<!--        <input type="button" value="close">-->
<!--        <input type="button" value="send data">-->
        <div id="wrapper">
            <input type="button" value="open">
            <input type="button" value="close">
            <input type="button" value="send data">
        </div>
        <script>
            window.name = "父窗体";
            let child_handler=null;
            // let btn_open=document.querySelector("input[value=open]");
            // let btn_close=document.querySelector("input[value=close]");
            // let btn_send=document.querySelector("input[value='send data']");
            let wrapper = document.querySelector("#wrapper");
            wrapper.addEventListener("click", (event) => {
                let all_btn = document.querySelectorAll("#wrapper input");
                switch (event.target) {
                    case all_btn[0]:
                        child_handler = window.open("child.html", "child_win11", "left=100,top=200,width=600,height=400")
                        break;
                    case all_btn[1]:
                        child_handler.close();
                        break;
                    case all_btn[2]:
                        child_handler.postMessage("我是父窗体发送的数据");

                }

            });


            // btn_open.addEventListener("click",event=>{
            //     // window.open("child.html","_self");
            //     child_handler=window.open("child.html","child_win11","left=100,top=200,width=600,height=400")
            // })
            //
            // btn_close.addEventListener("click",event=>{
            //     // window.open("child.html","_self");
            //     // child_handler.close();
            //     child_handler.close();
            // })
            //
            // btn_send.addEventListener("click",event=>{
            //     child_handler.postMessage("我是父窗体发送的数据");
            // })


            //接收,接收到了
            window.addEventListener("message", (event) => {
                console.log(event.data)

            })
        </script>


    </body>
</html>

代码4

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
<h1>child.html</h1>
        <input type="button" value="button">
        <script>
            document.querySelector("input").addEventListener("click",(event=>{
                console.log(window.opener);
                console.log(window.document.body.innerHTML);
            }))
            //接收
            window.addEventListener("message",(event)=>{
                console.log(event.data)
                console.log(event.origin)
                console.log(event.source.name)
                event.source.postMessage("我是子窗体发送的数据");//发送信息给父窗体
            })
        </script>



    </body>
</html>