精华内容
下载资源
问答
  • --父窗口无标题页function OpenWin(){window.open("child.aspx","new")}function shuaxin(obj)//...//获取对象属性。}function shuaxinb(){window.location.href=window.location.href;}父窗口--子窗口无标题页funct...

    --父窗口

    无标题页

    function OpenWin()

    {

    window.open("child.aspx","new")

    }

    function shuaxin(obj)//obj是接收到的对象

    {

    alert(obj.name);//获取对象属性。

    }

    function shuaxinb()

    {

    window.location.href=window.location.href;

    }

    父窗口

    --子窗口

    无标题页

    function closew()

    {

    var parent= window.opener;

    var person={};

    person.name="Tom";

    person.age=123;

    // parent.location.reload();

    parent.shuaxin(person);//把person对象传递过去

    var parentControl=parent.document.getElementById("ddddd");

    parentControl.value="我是被子窗口赋值过来的,哈哈";

    window.close();

    }

    子窗口

    展开全文
  • JavaScript Window窗口对象

    千次阅读 多人点赞 2020-01-18 11:49:05
    文章目录一、Window对象概述1、Window对象属性2、Window对象方法3、如何使用二、对话框1、警告对话框2、确认对话框3、提示对话框三、打开与关闭窗口1、打开窗口2、关闭窗口(1)关闭当前窗口(2)关闭子窗口四、控制...


    一、Window对象概述

    Window对象可以用来打开浏览器,调整浏览器的位置、大小等等功能。

    Window对象可以处理框架和框架之间的关系,通过这种关系在一个框架中处理另一个框架中的文档。他也是所有对象的顶级对象,通过Window对象的子对象进行操作,可以实现更多的效果。

    1、Window对象属性

    每个对象都有自己的属性,顶级对象Window是所有其他子对象的父对象,它可以出现在每个页面上,并且可以咋单个JS应用程序中被多次使用。

    下表列出了一些Window对象常用属性:

    属性说明
    document对话框中显示当前文档
    frames表示当前对话框中所有frame对象的集合
    location指定当前文档的URL
    name对话框的名字
    status/defaultStatus状态栏中的当前信息
    top表示最顶层的浏览器对话框
    parent/opener表示包含当前对话框的夫对话框
    closed表示当前对话框是否关闭(布尔值)
    self表示当前对话框
    screen表示用户屏幕,提供屏幕尺寸、颜色深度等信息
    navigator表示浏览器对象,用于获取与浏览器相关的信息

    2、Window对象方法

    方法说明
    alert()弹出警告对话框
    confrim()在确认对话框显示指定的字符串
    prompt()弹出一个提示对话框
    open()打开新浏览器对话框并且显示URL或名字引用的文档,并设置创建对话框的属性
    close()关闭被引用的对话框
    focus()指定对话框放在所有浏览器最前面
    blur()指定对话框放在所有浏览器最后面
    scrollTo(x,y)把对话框滚动到指定的坐标
    scrollBy(offsetx,offsety)按照指定位移量滚动对话框
    setTimeout(timer)在指定的毫秒数过后,对传递的表达式求值
    setInerval(interval)指定周期性执行代码
    moveTo(x,y)将对话框移动到指定坐标
    moveBy(offsetx,offsety)将对话框移动到指定的位移量处
    resizeTo(x,y)设置对话框大小
    resizeBy(offsetx,offsety)按照指定的位移量设置对话框大小
    print()“打印”
    navigate(URL)使用对话框显示URL指定的页面

    3、如何使用

    JS运行使用一个字符串来给窗口命名,也可以使用一些关键字来代替。

    Window对象可以直接调用方法和属性,不需要使用new运算符来创建对象:

    window.属性名
    window.方法名(参数列表)
    
    //    使用关键字来代替window   //
    parent.属性名
    parent.方法名(参数列表)
    

    二、对话框

    为了响应用户的某种需求而弹出的小窗口

    1、警告对话框——alert()

    语法如下:

    window.alert(str);
    

    弹出警告对话框,str为对话框显示的字符串,一般运行结果如下:
    在这里插入图片描述

    2、确认对话框——confrim()

    语法如下:

    window.confrim(question);
    

    其中question是要显示在确认对话框的纯文本,也是表达了程序想让用户回答的问题

    而且他有一个返回值,如果单击了确定返回真、反之为假。

    比如下面的这段小程序:

    <script>
        var flag = window.confirm("你确定要关闭浏览器窗口吗?");
        if(flag)
            window.close();
    </script>
    

    会展示下面的结果:
    在这里插入图片描述

    3、提示对话框——prompt()

    弹出一个提示框,在提示框中有一个输入框,在显示输入框的时候,在输入框内显示提示字符串,在输入文本框显示缺省文本并等待用户输入,输入之后,单击确定返回用户输入的字符串,如果是取消则返回null值

    语法如下:

    window.prompt(str1,str2)
    

    参数说明:其中str1表示在对话框要被显示的信息,str2指定对话框内输入框的值。

    比如下面这段小程序:

    <script>
        function pro() {
            var message = document.getElementById("message");
            message.value = window.prompt(message.value,"返回的信息")
        }
    </script>
    <input id="message" type="text" size="40" value="请在此输入信息">
    <br><br>
    <input type="button" value="显示对话框" onClick="pro()">
    

    效果如下:
    在这里插入图片描述


    三、打开与关闭窗口

    1、打开窗口——open()

    语法格式:

    WindowVar = window.open(url,name,[location])
    

    参数说明:

    • WindowVar:如果open方法成功,返回一个Window对象的句柄。
    • url目标窗口的URL
    • name:目标窗口Window对象名称
    • location:大考窗口的可选参数
      他的可选参数,如下表所示:
    参数说明
    top窗口顶部距离屏幕顶部的像素数
    left窗口左端距离屏幕左端的像素数
    width/height宽度/高度
    scrollbars是否显示滚动条
    resizable设定对话框大小是否固定
    toolbar浏览器的工具条,包括后退及前进按钮
    menubar菜单条,一般包括有文件、编辑及其他一些条目
    location定位区,地址栏
    direction更新信息的按钮

    下面举几个例子:

    打开一个新窗口:window.open("new.html","new")

    打开一个指定大小的窗口:window.open("new.html","new","height=140,width=690")

    打开一个指定位置的窗口:window.open("new.html","new","top=300,left=200")

    打开一个带滚动条的固定窗口:window.open("new.html","new","scrollbars,resizable")

    2、关闭窗口

    (1)关闭当前窗口

    下面任意语句可以实现关闭当前窗口:

    window.close();
    close();
    this.close();
    

    例子:关闭子窗口时自动刷新父窗口

    步骤1: 在原来的页面,怼一个<a>链接,用于打开一个新窗口,代码如下:

    <a href="#" onClick="javascript:window.open('new.html','width=400,height=220')">打开链接</a>
    

    步骤2: 新建new.html,然后写入脚本和一个按钮,代码如下:

    <script>
        function clo() {
            alert("关闭子窗口!");
            window.opener.location.reload();        //刷新父窗口
            window.close();
        }
    </script>
    <input type="submit" value="关闭" onclick="clo()">
    

    效果如下:
    在这里插入图片描述

    (2)关闭子窗口

    通过窗口句柄以变量的形式进行保存,然后通过close方法关闭创建的窗口,语法如下:

    windowname.close();
    

    其中windowname表示已打开窗口的句柄

    例如,在主窗口旁边弹出一个子窗口,当单击主窗口的按钮后,自动关闭子窗口,代码如下:

    <form name="form1">
        <input type="button" name="Button" value="关闭子窗口" onclick="newclose()">
    </form>
    <script>
        var win = window.open("new.html","new","width=300,height=100");
        function newclose() {
            win.close();
        }
    </script>
    

    效果如下:
    在这里插入图片描述


    四、控制窗口

    1、移动窗口

    (1)moveTo()方法

    语法如下:

    window.moveTo(x,y);
    

    其中x,y是窗口左上角的坐标,

    (2)resizeTo()方法

    这个方法可以将当前窗口改成(x,y)大小,x、y分别代表宽度和高度,语法如下:

    window.resizeTo(x,y);
    

    (3)screen对象

    屏幕对象反映了当前用户的屏幕设置,下表列出了屏幕对象的一些属性:

    属性说明
    width整个屏幕的水平尺寸
    height整个屏幕的垂直尺寸
    pixelDepth显示器每个像素的位数
    colorDepth返回当前颜色设置所用的位数,1代表黑白;8代表256色(256种颜色);16代表增强色(大概64000种颜色);24/32代表真彩色(1600万种颜色)
    availWidth返回窗口内容区域的水平尺寸
    availHeight返回川康内容区域的垂直尺寸

    2、窗口滚动

    利用Window对象的scroll()方法可以指定窗口的当前位置,从而实现窗口的滚动效果,语法如下:

    window.scroll(x,y);			//滚动到指定的绝对位置,相对文档的左上角
    window.scrollTo(x,y);		//同上
    window.scrollBy(x,y);		
    /*可以将文档滚动到相对位置,如果参数x为正数,向右滚动,否则向左;如果参数y为正数向下滚动,否则向上*/
    

    比如选择一张我们的女神江疏影把图片拉大,然后写脚本:

    <img src="1.jpg" height="1000">
    <script>
        var pos = 0;
        function scroller() {
            pos++;
            scrollTo(0,pos);
            clearTimeout(timer);
            var timer = setTimeout("scroller()",10);
        }
        scroller();
    </script>![在这里插入图片描述](https://img-blog.csdnimg.cn/20200118113027730.gif)
    

    效果如下:(太美啦!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!)
    在这里插入图片描述

    3、改变窗口大小

    实现将当前窗口改变为指定的大小(x,y),当x,y>0为扩大,反之为缩小,语法如下:

    window.resizeBy(x,y);
    

    例子:动态改变窗口大小

    代码如下:

    <script>
        var winheight,winsize,x;
        function openwin() {
            winheight=100;
            winsize=100;
            x=5;
            win2 = window.open("new.html","","scrollbars='no'");
            win2.moveTo(0,0);
            win2.resizeTo(100,100);
            resize();
        }
        function resize() {
            if(winheight>=screen.availHeight-3)
                x=0;
            win2.resizeBy(5,x);
            winheight+=5;
            winsize+=5;
            if(winsize>=screen.width-5){
                winheight=100;
                winsize=100;
                return;
            }
            setTimeout("resize()",50);
        }
    </script>
    <a href="javascript:openwin()">打开一个自动改变大小的窗口</a>
    

    效果如下:
    在这里插入图片描述

    4、访问窗口历史

    利用history对象实现访问窗口历史,history对象是一个只读URL字符串数组,主要存储一个最近访问网页的URL地址列表。语法如下:

    [window.]history.property|method([parameters])
    

    history对象常用属性:

    属性说明
    length历史列表的长度,用于判断列表中的入口数目
    current当前文档的URL
    next历史列表的下一个URL
    previous历史列表的前一个URL

    常用方法:

    方法说明
    back()退回前一页
    forward()重新进入下一页
    go()进入指定网页

    比如使用history对象中的back()forward()方法来引导跳转:

    <a href="javascript:window.history.forward();">forward</a>
    <a href="javascript:window.history.back()">back</a>
    

    使用history.go()方法指定要访问的历史记录,如果参数为正数向前移动,否则向后移动

    <a href="javascript:window.history.go(-1)">向后退一次</a>
    <a href="javascript:window.history.go(2)">向前进两次</a>
    

    length属性访问history数组的长度,通过它可以很快访问末尾:

    <a href="javascript:window.history.go(window.history.length-1)">末尾</a>
    

    5、设置超时

    为一个窗口设置在某段时间后执行何种操作,称为设置超时

    window对象的setTimeout()方法用于设一个超时,语法如下:

    timerId = setTimeout(要执行的代码,以毫秒为单位时间)
    

    还可以使用clearTimeout()来中止该超时设置,语法格式如下:

    clearTimeout(timerId);
    

    展开全文
  • JS获取当前window对象状态

    千次阅读 2014-08-28 23:27:17
    onfocus="alert('获得焦点');" onbeforeunload="alert('即将关闭窗口'); return false;">
    <html>
    
    <head>
    </head>
    <body οnlοad="alert('文档加载完毕!');" οnunlοad="alert('文档卸载完毕');" onBlur="alert('失去焦点');" 
     οnfοcus="alert('获得焦点');" οnbefοreunlοad="alert('即将关闭窗口'); return false;">
    </body>
    </html>
    展开全文
  • 标签元素的宽高值获取 ...页面窗口的宽度和高度获取   var s = "";  s += "\r\n网页可见区域宽:"+ document.body.clientWidth;  s += "\r\n网页可见区域高:"+ document.body.clientHeight;



    标签元素的宽高值获取

    //绝对宽度
    Obj.offsetWidth
    //绝对高度
    Obj.offsetHeight

    页面窗口的宽度和高度获取

    <body><SCRIPT LANGUAGE="JavaScript"> 
    var s = ""; 
    s += "\r\n网页可见区域宽:"+ document.body.clientWidth; 
    s += "\r\n网页可见区域高:"+ document.body.clientHeight; 
    s += "\r\n网页可见区域宽:"+ document.body.offsetWidth +" (包括边线和滚动条的宽)"; 
    s += "\r\n网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)"; 
    s += "\r\n网页正文全文宽:"+ document.body.scrollWidth; 
    s += "\r\n网页正文全文高:"+ document.body.scrollHeight; 
    s += "\r\n网页被卷去的高:"+ document.body.scrollTop; 
    s += "\r\n网页被卷去的左:"+ document.body.scrollLeft; 
    s += "\r\n网页正文部分上:"+ window.screenTop; 
    s += "\r\n网页正文部分左:"+ window.screenLeft; 
    s += "\r\n屏幕分辨率的高:"+ window.screen.height; 
    s += "\r\n屏幕分辨率的宽:"+ window.screen.width; 
    s += "\r\n屏幕可用工作区高度:"+ window.screen.availHeight; 
    s += "\r\n屏幕可用工作区宽度:"+ window.screen.availWidth; 
    s += "\r\n你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"; 
    s += "\r\n你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"; 
    alert(s); 
    </SCRIPT>


    转载地址:http://hi.baidu.com/shiryu963/blog/item/633a46d3587a7cd7a8ec9a26.html

    展开全文
  • vue.js获取当前点击对象(其实是套着vue的原生javascript吧,笑?) 转载请注明出处:http://www.cnblogs.com/meng1314-shuai/p/7455575.html 熟悉jquery的小伙伴应该都知道jquery获取当前点击对象是有多么的粗暴,...
  • 这些天用JS调界面,就在网络上搜索了一些关于获取当前窗口对象大小的写法.记录一下~ JS获取大小各参数<script>function getInfo(){ var s = ""; s += " 网页可见区域宽:"+ document.body.clientWidth; s +=...
  • LANGUAGE="JavaScript"> // alert(document.body.scrollHeight); // alert(document.body.scrollTop); // alert(document.documentElement.scrollT
  • js 获取当前元素距离窗口的距离

    千次阅读 2020-01-15 11:29:40
    平时在写js的时候,偶尔会需要用js获取当前div到 body 左侧、顶部的距离。网上查一查,有很多都是通过offsetTop、offsetLeft来计算出来的。我按照网上的查到的资料用了一次,算出来了一堆错误答案。下面我要分享的...
  • 窗口对象的常用方法1.alert() alert()将能显示的对象弹窗显示function Inferno(){ "Lasciate ogne speranza, voi ch'intrate" } alert("Lasciate ogne speranza, voi ch'intrate"); alert(Inferno);2.onblur()和...
  • 熟悉jquery的小伙伴应该都知道jquery获取当前点击对象是有多么的粗暴,直接$(dom)获取当前点击的dom元素,根据这个,几乎可以获取这个dom元素的所有属性。不过,当我们使用vue的时候呢? 也许刚开始会有一点迷茫。...
  • 手头一个项目,需要对屏幕分辨率进行检测,同时对窗口大小改变进行监测,窗口大小改变则css样式跟随... 1、 Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。
  • window对象 window,self 指向window对象本身 所有全局变量都是window对象的属性 一.窗口信息 1.innerHeight 浏览器窗口内容区域高度 2.innerWidth 浏览器窗口内容区域宽度 3.outerHeight 浏览器窗口总高度 4....
  • JavaScript 获取浏览器窗口的大小JavaScript 获取浏览器窗口的大小2010-04-16程序演示:获取浏览器当前窗口大小。当浏览器窗口大小变化时,显示的值会随时变化。浏览器窗口的实际宽度:浏览器窗口的实际高度:程序...
  • JS获取页面窗口大小解读

    千次阅读 2018-09-10 10:10:51
    技术要点 本节实例给出一个获取浏览器当前窗口大小的方法。当浏览器窗口大小变化时,显示的值会随时变化。 技术要点 本节代码主要使用了Document对象关于窗口的一些属性,这些属性的主要功能和
  • 主要用到Location 对象,包含有关当前 URL ...方法一、js获取项目根路径的方法方法二 (window.document.location.href/window.document.location.pathname) ------------转自网络获取当前网址,如: http://localho...
  • JavaScript中可以使用window.parent方法获取父窗口window对象,使用this.window方法获取当前页面window对象,然后通过对比两个对象是否相等判断是否有父窗口。JavaScript判断当前窗口是否有父窗口:if(window.parent...
  • Vue.js可以传递$event对象 <body id="app"> <ul> <li v-on:click="say('hello!', $event)">点击当前行文本</li> <li>li2</li> <li>li3</li> </ul> <...
  • 在浏览器中,window对象既是JavaScript访问浏览器窗口的接口,又是JavaScript的全局对象(Global)。因此在全局作用域中声明的所有变量和函数也是window对象的属性和方法。 访问浏览器窗口 通过window对象可以访问...
  • JS 获取浏览器窗口大小

    万次阅读 2018-01-17 09:45:55
    JS 获取浏览器窗口大小 // 获取窗口宽度 if (window.innerWidth) winWidth = window.innerWidth; else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth; // 获取窗口...
  • <html lang="en"> <head> <meta charset="UTF-8"> , initial-scale=1.0"> 中国的流浪猫title> head> <body> body> html> <script> //获取当前页面可视化窗口的尺寸,以对象的形式返回 function getViewportOffset() ...
  • 点击当前行文本 li2 li3 属性 描述 bubbles 返回布尔值,指示事件是否是起泡事件类型。 cancelable 返回布尔值,指示事件是否可拥可取消的默认...type 返回当前 Event 对象表示的事件的名称。 currentTar...
  • 如何通过窗口名字获得窗口对象

    千次阅读 2008-08-20 19:50:00
    这时候有两种情况: 1、A窗口未关闭:得到A窗口对象,并传递给Awin这个变量 2、A窗口已关闭:打开一个新的空白页,如果你要让新的页面内容跟A窗口一样,写上需要的url便可,如:window.open(a.html
  • 本节代码主要使用了Document对象... Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。 Document对象的body属性对应HTML文档的<body>标签。Document对
  • 获得当前窗口的宽度

    千次阅读 2018-08-09 16:45:30
    var documentElementRect = document.documentElement.getBoundingClientRect() // 返回一个矩形对象,包含四个属性:x、 y、 width、 height、 left、 top、 right和bottom fullWindowWidth = documentElementRect....
  • JS获取浏览器窗口大小
  • 通常使用window.open的方式开启新窗口的话要取得父窗口的控件,可以用window.opener来取得父窗口然而如果使用showModalDialog的话...却无效如果有需要的话,需要修改开启的语法以及showModalDialog中的语法开启语法...
  • //JS得到对象在页面中离左边的绝对位置function getAbsoluteLeft(ob){ if(!ob){return null;} var mendingOb = ob; var mendingLeft = mendingOb .offsetLeft; while( mendingOb != null &amp;&amp; ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 83,303
精华内容 33,321
热门标签
关键字:

js获取当前窗口对象