javascript基礎-窗口對象(window)

時間 2020-04-24

標籤 javascript 基礎窗口對象 window 欄目 JavaScript 简体版

原文原文鏈接

1.topjavascript

        該變動永遠指分割窗口最高層次的瀏覽器窗口。若是計劃從分割窗口的最高層次開始執行命令，就能夠用top變量。
        2.opener
        opener用於在window.open的頁面引用執行該window.open方法的的頁面的對象。例如：A頁面經過window.open()方法彈出了B頁面，在B頁面中就能夠經過opener來引用A頁面，這樣就能夠經過這個對象來對A頁面進行操做。
        3.parent
        parent用於在iframe,frame中生成的子頁面中訪問父頁面的對象。例如：A頁面中有一個iframe或frame，那麼iframe或frame中的頁面就能夠經過parent對象來引用A頁面中的對象，這樣就能夠獲取或返回值到A頁面中。
        4.另外self 指的是當前窗口html

（1）window.topjava

（2）window.opener瀏覽器

（3）window.parent框架

（4）selfide

利用<frameset>、<frame>給主頁面劃分窗口top、left、right，將主頁面劃分紅三個頁面窗口
ui

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>

<frameset rows="20%,*">
    <frame src="top.html" name="top"/>
    <frameset cols="30%,*">
        <frame src="left.html" name="left"/>
        <frame src="right.html" name="right"/>
    </frameset>
</frameset><noframes></noframes>

</html>

top頁面窗口google

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
   <script language="javascript">
      function demo(){
		 parent.frames[0].document.bgColor="blue";
		 alert(parent.frames.length); 
		  }
   </script>
</head>

<body>
   <input type="button" value="顏色" onclick="demo()" />
   <a href="http://www.google.com" target="right">谷歌</a>
</body>
</html>

left頁面窗口spa

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
    <script>
        function demo(){
			 parent.frames[0].location.href="http://www.baidu.com";
			}
    </script>
</head>

<body>
    <input type="button" value="百度" onclick="demo()" />
</body>
</html>

right頁面窗口orm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
  <script>
      function demo(){
		  parent.frames[1].location.href="http://www.sina.com";
		  }
  </script>
</head>

<body>
   <a href="javascript:demo()">新浪</a>
</body>
</html>

（5）parent與opener的區別

parent指父窗口，在frameset中frame的parent就是frameset窗口；

opener指用window.open等方式建立的新窗口對應的原窗口；

parent是相對於框架來講父窗口對象；

opener是針對於用window.open打開的窗口來講的父窗口，前提是window.open打開的纔有document.parentWindow.menthod()調用父頁面的方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
 <script>
   function demo(){
     window.open("3-4.html");
   }
   </script>
</head>
<body>
<input type="button"  value="點擊" onclick="demo()" />
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script>
document.parentWindow.document.bgColor="red";
</script>
</head>

<body>
</body>
</html>

附：Window對象、Parent對象、Frame對象、Document對象和Form對象的階層關係

Window對象→Parent對象→Frame對象→Document對象→Form對象，以下：

parent.frame1.document.forms[0].elements[0].value;