美文网首页
BOM 事件

BOM 事件

作者: 努力进化 | 来源:发表于2018-08-26 14:23 被阅读0次

    1.window.confirm(“msg”)

    功能:显示一个带有指定消息和包含确定和取消按钮的对话框。点击确定返回true,取消返回false;

    eg:点击确定按钮删除小米5
    技术要点:点击确定resutl返回true,取消返回false
        <div>
            <p id="mi">小米</p>
            <button id="btn">删除</button>
            <script>
                var mi=document.getElementById("mi");
                var btn=document.getElementById("btn");
                btn.onclick=function(){
                    var result = window.confirm("你确定删除小米吗?");
                    if(result){
                        mi.parentNode.removeChild(mi);
                    }
                }
            </script>
        </div>
    
    confirm.png

    经自己敲代码发现,window.alert 和 window.confirm都是弹出对话框,只不过前者是弹出一个带确定按钮的警告框。后者是带确定和取消按钮的对话框。

    2.window.prompt(“text,defaultText”) [ 不太熟悉,需要实际操作]

    参数说明:

    text:在对话框中显示的文本

    defaultText:默认输入文本

    返回值:点取消按钮,返回null

        <script>
            var ping= window.prompt("请问平帅帅不帅?","帅");
            document.write(ping);
        </script>
    
    prompt.png

    即点击确定就是显示对话框中的文本,点击取消按钮就是显示null。

    3.window.open(pageURL,name,parameters)

    参数说明:

    pageURL:子窗口的路基

    name:子窗口的句柄(name声明了新窗口的名称,方便后期通过name对子窗口进行引用)

    parameters:窗口参数(各参数之间用逗号分隔)

    <body>
        <a href="#" onClick="window.open('01.html', '01', 'width=400, height=400, scrollbars=no'); return false">
            [打开01.html]
        </a>
    </body>
    
    open.png
    参数.png

    4.screen对象 (屏幕)

    screen对象包含有关客户端显示屏幕的信息

    screen.availWidth

    screen.availHeight

    <script>
            document.write("可用宽度:"+screen.availWidth);
            document.write("可用高度:"+screen.availHeight);
        </script>
    
    screen.png

    5.location对象

    location对象提供了与当前窗口中加载的文档有关信息,还提供了一些导航的功能,他既是window对象的属性,也是document对象的属性。

    location.href与window.location.href等价

    语法:location.hash

    功能:返回URL中的hash(#号后跟0或多个字符),如果不包含则返回空字符串

    语法:location.host

    功能:返回服务器名称和端口号

    语法:location.hostname

    功能:返回不带端口号的服务器名称

    语法:location.pathname

    功能:返回URL中的目录和(或)文件名

    语法:location.port

    功能:返回URL中指定的端口号,如果没有,返回空字符串

    eg:location.assign(加载新文档)

        <button id="btn" onclick="myfunction()">fenbie</button>
        <script>
            function myfunction(){
                location.assign("http://www.w3school.com.cn");
            }
        </script>
    

    6. history对象

    history对象保存了用户在浏览器中访问页面的历史记录

    语法:history.back()

    功能:回到历史记录的上一步

    相当于是用了history.go(-1)

    //-1表示前一步,-2前两步

    语法:history.go(1)

    功能:回到历史记录的前一步

    相当于history.forward()

    语法:history.go(-n)

    功能:回到历史记录的前n部

    语法:history.go(n)

    功能:回到历史记录的后n步

    1.history.back() 方法加载历史列表中的前一个 URL。
    这与在浏览器中点击后退按钮是相同的
    function goBack()
      {
      window.history.back()
      }
    

    2.history forward() 方法加载历史列表中的下一个 URL。

    这与在浏览器中点击前进按钮是相同的

    function goForward()
      {
      window.history.forward()
      }
    

    相关文章

      网友评论

          本文标题:BOM 事件

          本文链接:https://www.haomeiwen.com/subject/gsqiiftx.html