BOM的理解--各类窗口之间的关系

时间 2019-11-11

标签 bom 理解各类窗口之间关系繁體版

原文原文链接

---------------------------------------下面是第一个HTMLhtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul></ul>
<textarea></textarea>
<input type="button" value="发送消息到w2"/>
<input type="button" value="发送消息到w3"/>
<input type="button" value="打开w3"/>
<input type="button" value="关闭w3"/>
<iframe src="w2.html" style="width: 500px;height: 400px;"></iframe>

</body>
<script>
    var input=document.getElementsByTagName("input");
    var ul=window.document.getElementsByTagName("ul")[0];
    var text=window.document.getElementsByTagName("textarea")[0];
    var iframe=window.document.getElementsByTagName("iframe")[0];
    var w3;
    input[2].onclick=function(){
        w3=window.open('w3.html',"w3Window","width=300,height=300");
    };
    input[3].onclick=function(){
        if(w3==undefined)
        {
            alert("不存在w3!");
        }
        else
        {
            if(w3.closed){
                alert("w3已经被关闭");
            }
            else{
                w3.close();
            }
        }
    };
    input[1].onclick=function(){

        if(w3!=null&&!w3.closed){
            var liNode=w3.document.createElement("li");//放在内存里面的
            var ul3=w3.document.getElementsByTagName("ul")[0];//获得w3页面下的第一个ul
            var val=text.value;
            liNode.innerHTML=val;
            ul3.appendChild(liNode);
             w3.focus();
        }
        else
        {
            alert("请打开w3！");
        }
    };
    input[0].onclick= function () {
        var winP=iframe.contentWindow;//经过iframe的contentWindow属性找到窗口
        if(winP){
        var val=text.value;
            var li=winP.document.createElement("li");
            li.innerHTML=val;
            var ul=winP.document.getElementsByTagName("ul")[0];
            ul.appendChild(li);
        }

    }
</script>
</html>app

---------------------------------------下面是第二个页面spa

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul></ul>
<textarea></textarea>
<input type="button" value="发送消息到w1"/>
</body>
<script>
    var text=document.getElementsByTagName("textarea")[0];
    var input=document.getElementsByTagName("input")[0];
    input.onclick= function () {
        var winP=window.parent;//经过parent属性来寻找窗口的父窗口
        if(winP){
        var li=winP.document.createElement("li");
        var val=text.value;
        li.innerHTML=val;
        var ul=winP.document.getElementsByTagName("ul")[0];
        ul.appendChild(li);
        }
    }
</script>
</html>htm

-----------------------------------------下面是第三个页面ip

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul></ul>
<textarea></textarea>
<input type="button" value="发送消息到w1"/>
</body>
<script>
    var text3=window.document.getElementsByTagName("textarea")[0];
    var input=window.document.getElementsByTagName("input")[0];
    input.onclick=function () {
        var openerWindow=window.opener;//寻找打开此窗口的窗口
        if(openerWindow)
        {
        var li=openerWindow.document.createElement("li");
        var ul=openerWindow.document.getElementsByTagName("ul")[0];
        var val=text3.value;
        li.innerHTML=val;
        ul.appendChild(li);
        }
    }
</script>
</html>
内存