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>
內存

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。