第六周蓝旭培训总结

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(是否显示滚动条)等。

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

  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框之后才可以显示。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值