JS之浏览器对象BOM

    xiaoxiao2021-03-25  25

    Java帮帮 2017-02-18 10:58

    JavaScript浏览器对象BOM

    DOM Window 代表窗体

    DOM History 历史记录

    DOM Location 浏览器导航

    重点:window、history、location ,最重要的是window对象

    1.window对象

    Window 对象表示浏览器中打开的窗口,如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象

    window.frames 返回窗口中所有命名的框架

    parent是父窗口(如果窗口是顶级窗口,那么parent==self==top)

    top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe)

    self是当前窗口(等价window)

    opener是用open方法打开当前窗口的那个窗口

    ①:父子窗体之间的通讯

    在页面内嵌入一个iframe,在iframe中提供一个输入项,输入后,在iframe外面窗口中显示内容

    显示结果如上图所示,实现思路如下:

    子窗体:2.html

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=gbk">

    <title>Untitled Document</title>

    <script type="text/javascript">

    function  showOutter(){

    // 获得输入内容

    var  content = document.getElementById("content").value;

    // 将输入的内容显示到主窗体info 中

    window.parent.document.getElementById("info").innerHTML = content;

    }

    </script>

    </head>

    <body>

    <h1>子窗体</h1>

    <input type="text" id="content" />

    <input type="button" value="显示到主窗体" οnclick="showOutter();"/>

    </body>

    主窗体:1.html

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=gbk">

    <title>父子窗体通信</title>

    <script type="text/javascript">

    function  showContent(){

    // 用主窗体读取子窗体内容

    var  content = window.frames[0].document.getElementById("content").value;

    alert(content);

    }

    </script>

    </head>

    <body>

    <h1>主窗体</h1>

    <div id="info"></div>

    <!-- 在主窗体中获得子窗体内容 -->

    <input type="button" value="获取子窗体输入内容" οnclick="showContent();" />

    <iframe src="2.html"></iframe>

    </body>

    ②:window的open close

    <head>

    <title>打开关闭窗体</title>

    <meta http-equiv="content-type" content="text/html; charset=gbk">

    <script type="text/javascript">

    //用一个变量记录打开的网页

    var  openNew;

    function  openWindow(){

    openNew = window.open("http://www.itcast.cn");

    }

    //关闭的时候需要注意关闭的是打开的网页,而不是本身

    function  closeWindow(){

    openNew.close();

    }

    </script>

    </head>

    <body>

    <input type="button" value="打开传智播客网页" οnclick="openWindow()">

    <input type="button" value="关闭传智播客网页" οnclick="closeWindow()">

    </body>

    ③:window弹出对话框相关的3个方法

    alert()警告框 confirm()确认框 prompt()输入框

    <script type="text/javascript">

    alert("这是警告框!")

    var  con = confirm("你想好了吗?");

    alert(con);

    var  msg = prompt("请输入姓名","张三");

    alert(msg);

    </script>

    ④:定时操作setInterval & setTimeout

    setInterval:定时任务会重复执行

    setTimeout:定时任务只执行一次

    在页面动态显示当前时间

    <script type="text/javascript">

    window.onload = function(){

    var  date = newDate();

    document.getElementById("time1").innerHTML =date.toLocaleString();

    document.getElementById("time2").innerHTML =date.toLocaleString();

    setInterval("show1();",1000); //间隔1秒后重复执行

    setTimeout("show2();",1000); //1秒后执行,执行1次

    }

    function  show1(){

    vardate = newDate();

    document.getElementById("time1").innerHTML =date.toLocaleString();

    }

    function  show2(){

    vardate = newDate();

    document.getElementById("time2").innerHTML =date.toLocaleString();

    setTimeout("show2();",1000);//不终止

    }

    </script>

    <body>

    <div id="time1"></div>

    <div id="time2"></div>

    </body>

    2.history 对象

    代表历史记录,常用来制作页面中返回按钮

    <input type="button" value="返回" οnclick="history.back();" />

    <input type="button" value="返回" οnclick="history.go(-1);" />

    3.Location 对象

    代表浏览器导航 在js函数中发起href链接效果

    location.href='跳转后url' ; 等价于 <a href='xxx'></a>

    转载请注明原文地址: https://ju.6miu.com/read-50133.html

    最新回复(0)