JS操作BOM

厉害一点的文章：https://segmentfault.com/a/1190000004076145

 

上一次说过DOM那就是树形的文档结构，而BOM主要是针对浏览器对象的，也就是window，常用的window的子对象比如：document  event  location  frames

 

window对象常用的属性： status  opener（在子窗体中代表其父窗体的对象）  closed  

常用的方法：alert()  confirm()   setInterval()（循环定时）  clearInterval()    setTimerout()（一次性定时）    clearTimeout()

 

<a href="del.aspx" onclick="return confirm('确定删除吗？');">删除</a> 记住，一定要在confirm()前加上return 不然的话，就算是点击 取消，也还是会执行 href的链接

 

我还发现个现象：

t= function () { alert(1);}
setInterval("t()",5000);   正常显示

 

t= function () { alert(1);}
setInterval("t",5000);  定时失效

 

t= function () { alert(1);}
setInterval(t(),5000);  立即弹窗，定时失效

 

t= function () { alert(1);}
setInterval(t,5000);   正常显示

 

===================================================

说一说windo.open()这个方法吧，如果是单纯的一句  window.open("http://baidu.com"); 会在浏览器里新打开一个窗口，而事实上open不止是这个样子，它还有好多参数，新打开的窗口和父窗口之间还可以互相操作。

 

 <script>
        var b = window.open("index2.html", "qw", "top=300,left=100,width=400,height=200");
        //b就是新打开的子窗口的对象
        function show(obj) {
            b.document.bgColor = obj.value;
        }

    </script>

    <input type="button" onclick="show(this);" value="red" />
    <input type="button" onclick="show(this);" value="yellow" />
    <input type="button" onclick="show(this);" value="black" />

通过点击父窗口伤的按钮就可以切换子窗口的北京颜色，从而实现了父窗口操作子窗口，

    <script>     
        //子操作父
        opener.document.bgColor = "red";
        opener.document.title = "red";
    </script>

然而在通过window.open()里打开的子页面里的 opener属性就是代表子窗口所属的父窗口对象，从而实现了子窗口操作父窗口。

<body onunload="cl();">  
    <script>
        var b = window.open("index2.html", "qw", "top=300,left=100,width=400,height=200");
        //b就是新打开的子窗口的对象     
        function cl()
        {
            if (!b.closed)
            {
                b.close();
            }
        }
    </script>

关闭父窗口，子窗口也关闭。

======================================

frameset框架第一个页面：记住：frameset不与body共存

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<frameset rows="100,*">
    <frame name="top" />
    <frameset cols="200,*">
        <frame name="left" src="index2.html" />

        <frame name="right" />
    </frameset>
</frameset>

index2.html

<body>
    <input type="button" onclick="window.document.bgColor = 'red';" value="当前widow" />
    <input type="button" onclick="window.parent.parent.frames[0].document.bgColor = 'yellow';" value="上面widow" />
    <input type="button" onclick="window.top.frames['right'].document.bgColor = 'black';" value="右面widow" />
</body>

如上所示，一共有三个单独的“页面”，每一个页面都有自己的window，但是呢，每个页面之间是可以通过一些手段进行联系的，其中 window.top是返回最顶层的window,通过其frames的属性是个数组，通过访问数组的某个元素方式，从而访问到其他页面的window，自然就能找到其他页面的任何一个元素对象。

==========================================

页面跳转

<meta http-equiv="refresh" content="3" />  每3秒钟刷新一次

<meta http-equiv="refresh" content="3;url=http://baidu.com" />3秒钟后跳转到指定页面

 

window.navigate("http://baidu.com");
window.location.href = "http://baidu.com"; //兼容性问题
location = "http://baidu.com";//最常用
location.replace("http://baidu.com");

页面刷新

location.reload();

返回页面

history.back();  返回上一步   history.go(-1);

history.go(-2);  返回上2步

 

posted on 2017-03-14 22:36  奔游浪子  阅读(129)  评论(0)    收藏  举报

导航