第六周蓝旭培训总结

1.window对象

• Global对象

        通过var声明的所有全局变量和函数都会变成window对象的属性和方法。

        let:声明局部变量

        const:声明只读变量

        使用let和const声明时，不会把变量添加给全局变量

• 全局变量与在window对象上直接定义属性的区别

        1.全局变量不能通过delete操作符删除，而window属性上定义的变量可以通过delete删除。

<script>
var del=15;
delete del;
window.del2=15;
delete del2;
console.log(del);//15
console.log(del2);//del2 is not defined
</script>

        2.访问未声明的变量会抛出错误，但是通过属性查询在window对象上查询就不会抛出错误，会返回defined.

<script>
    var s = s1;
var s3 =window.s2;
console.log(s);//s1 is not defined.
console.log(s3);//undefined
</script>

•  窗口关系

        top指向最外层的框架

        parent指向当前的父边框

        self指向自己

 <div id="main1" onclick="judge()">窗口一</div>
        <iframe src="蓝旭第六周培训.html"></iframe>

    <script>
        // var div1=document.getElementById("main1");
        function judge(){
        if(window.self===top)
        {
            console.log("这是顶级窗口");
        }
        else{
            console.log("这不是顶级窗口");
        }
    }
</script>

 

•  窗口位置

        screenLeft,screenTop

        用于表示窗口相对于屏幕左侧和顶部的位置，IE、Safari 和 Opera 支持使用

        screenX，screenY

        用于表示窗口相对于屏幕左侧和顶部的位置，Firefox和Safari支持使用。

<div id="main1" onclick="judge(),screen()">窗口一
    <div id="main3" style="width: 50px;height: 50px;border:1px solid;">窗口1.1</div></div>
        <iframe src="蓝旭第六周培训.html"></iframe>
       <script>
        function screen(){ 
        console.log(window.screenLeft);
        console.log(window.screenTop);
    }
    </script>

window.open()

        window.open(url,name,specs,replace);

        url：用于在新窗口中打开一个URL地址或HTML文档的路径。如果省略此参数或后传入空字符串，则会打开一个空白的新窗口。

        name:新窗口的名称。可选参数。常用的取值包括'_blank'(在新标签页中打开）’_self'（在当前窗口中打开）、_parent（在父级框架中打开）、_top（在顶级框架中打开）等。如果指定了一个已存在的窗口名称，则在该窗口中打开 URL。

        specs:一个逗号分隔的字符串，用于指定新窗口的各种属性，如宽度、高度、位置、是否有菜单栏、工具栏、滚动条等

        常用属性是width（宽度）、height（高度）、left（左侧位置）、top（顶部位置）、menubar（是否显示菜单栏）、toolbar（是否显示工具栏）、scrollbars（是否显示滚动条）等。

  left 和 top 是指定窗口相对于屏幕左上角的位置的属性。

  left 属性用于指定窗口左侧距离屏幕左侧的距离，单位为像素（px）；

   top 属性用于指定窗口顶部距离屏幕顶部的距离，单位为像素（px）。

 <input type="button" value="打开窗户" onclick="openWin()" ><br>
<script>
var myWindow;
   function openWin(){
    myWindow=window.open('http://www.baidu.com', 
    '_blank','width=500,height=400,left=0,top=0');
   }
</script>

        replace：一个布尔值，表示是否替换浏览器的当前历史记录。如果为 true，则打开新窗口时会替换当前的历史记录，使用户无法使用“后退”按钮返回到原来的页面。如果为 false 或未指定，则不会替换当前的历史记录，用户可以使用“后退”按钮返回到原来的页面。

        需要注意的是，大多数浏览器会阻止未经用户允许的弹出窗口，因此如果在浏览器中使用 window.open() 方法时被阻止了，通常是因为浏览器的弹出窗口阻止程序（例如广告拦截器）或浏览器设置阻止了该网站的弹出窗口。

• 窗口位置移动(浏览器窗口的移动）

        moveTo(x,y)要移动到的新位置的绝对坐标x和y，x>0,y>0（右，下）

        moveBy(x,y)相对于当前位置在两个方向上移动的像素数x和y

 <input type="button" value="打开窗户" onclick="openWin()" ><br>
        <input type="button" value="移动窗口" onclick="moveWin()">
    <script>
    var myWindow;
    function openWin(){
        myWindow=window.open('','_blank','width=200,height=100')
    }
    function moveWin(){
        myWindow.moveTo(100,100);
    }
    </script>

•  窗口大小
  • outerWidth，outHeight 返回浏览器自身窗口大小
  • innerWidth，innerHeight返回页面视口大小，不包括浏览器的边框和工具栏【只能在IE9以及IE9以上的浏览器中才能获取】
  • document.documentElement.clientWidth，document.documentElement.clientHeight
    返回页面视口大小【在IE9以下的浏览器的标准模式中获取】

        什么是视口？

        在 JavaScript 中，视口（Viewport）是指浏览器窗口中可见内容的区域。它是指当前浏览器窗口的一部分，用于显示网页内容。视口的大小可以随着浏览器窗口的大小变化而改变。

视口在移动端设备上尤其重要，因为移动设备通常具有小屏幕尺寸，需要通过调整视口大小来适应不同设备的屏幕尺寸。为了实现响应式设计，Web 开发人员经常使用视口元标签来控制视口的大小和缩放行为，以便在不同设备上呈现出最佳的用户体验。

<div id="main1" onclick="wid()">窗口一
    <div id="main3" style="width: 50px;height: 50px;border:1px solid;">窗口1.1</div></div>
<script>
function wid(){
        console.log("视口宽为："+window.innerWidth);
        console.log("视口高为："+window.innerHeight);
        console.log("浏览器的高为:"+window.outerHeight);
        console.log("浏览器的宽为:"+window.outerWidth);
    }
</script>

 

 

 

•  调整窗口大小

        resizeTo(w,h):新的宽度和高度的值

        resizeBy(w,h):宽度和高度各要缩放多少

解决跨域问题

• 滚动距离

        浏览器窗口尺寸通常无法满足完整显示整个页面，为此用户可以通过滚动在有限的视口中查看页面。

        window.pageXoffset / window.scrollX 页面左侧距离视口左侧的距离

        window.pageYoffset / window.scrollY 页面顶部距离视口顶部的距离

function getPageScroll() { //获取网页滚动距离的兼容性方法
    let x, y;
    if(window.pageXOffset){ // IE9以及IE9以上的浏览器中
        x = window.pageXOffset;
        y = window.pageYOffset;
    }else if(document.compatMode === "BackCompat"){ //IE9以下的浏览器的混杂模式中
        x = document.body.scrollLeft;
        y = document.body.scrollTop;
    }else{ // IE9以下的浏览器的标准模式中
        x = document.documentElement.scrollLeft;
        y = document.documentElement.scrollTop;
    }

• 对话框

        系统对话框样式单一，且适用场景有限，不建议使用，可自定义弹窗。

        而且当使用alert（警告框）时，如果想让他输出（console.log(“111”))必须在点完弹出的alert框之后才可以显示。