天天看點
傳回

JavaScript參考手冊 Window 對象 5125字

作者：陳業貴 華為雲享專家 51cto(專家部落客 明日之星 TOP紅人) 阿裡雲專家部落客

文章目錄

  • ​​Window closed 屬性​​
  • ​​Window frames 屬性​​
  • ​​Window innerWidth 和 innerHeight 屬性​​
  • ​​Window localStorage 屬性​​
  • ​​Window name 屬性​​
  • ​​Window opener 屬性​​

Window closed 屬性 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script type="text/javascript">
    var myWindow;
    function openWin()//打開視窗的函數
    {
      myWindow=window.open('','',"width=400,height=200");//js函數打開視窗功能。寬度400，高度200
    }  
    function closeWin()//關閉視窗的函數
    {
      if(myWindow)//如果存在值代表視窗打開了
      {
        myWindow.close();//那就使用js關閉函數關閉它
      }
    }
    function checkWin()//告訴我視窗的狀态
    {
      if(!myWindow)//沒有值，代表沒有打開
      {
        document.getElementById('msg').innerHTML="我的視窗沒有被打開!";//
      }
      else//有值
      {
        if(myWindow.closed)//意思是(傳回視窗是否已被關閉。)true的話，關閉了
        {
          document.getElementById('msg').innerHTML="我的視窗被關閉了";
        }
        else//否則再打開中呢
          {
            document.getElementById('msg').innerHTML="我的視窗沒有被關閉!";
          }
      }
    }
  </script>
  <input type="button" value="打開我的視窗" onclick="openWin()">
  <input type="button" value="關閉我的視窗" onclick="closeWin()" />
  <br><br>
  <input type="button" value="我的視窗被關閉了嗎?" onclick="checkWin()" />
  <br><br>
  <div id="msg"></div>
</body>
</html>
JavaScript參考手冊 Window 對象 5125字

Window frames 屬性 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<p></p>
<button onclick="myFunction()">點我</button><br><br>
<iframe src="https://c.runoob.com" ></iframe>
<iframe src="https://m.runoob.com" ></iframe>
  <script type="text/javascript">
    function myFunction()
    {
      window.frames[0].location="https://www.runoob.com";//修改第一個 <iframe> 元素 (索引為 0) 的 src 屬性值：修改成這樣:https://www.runoob.com。frames[1]代表第二個iframe元素
    }
  </script>
</body>
</html>

之前的：

JavaScript參考手冊 Window 對象 5125字

修改後的：

JavaScript參考手冊 Window 對象 5125字

Window innerWidth 和 innerHeight 屬性 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<p id="demo"></p>
<button onclick="myFunction()">點我</button>
  <script type="text/javascript">
    function myFunction()
    {
      var w=window.innerWidth;
      var h=window.innerHeight;
      x=document.getElementById('demo');
      x.innerHTML="Width: " + w + " Heigth: " + h;//單擊按鈕來顯示這個視窗的高度和寬度(不包括工具欄和滾動條). .
    }
  </script>
</body>
</html>
JavaScript參考手冊 Window 對象 5125字
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<div id="demo"></div>
  <script type="text/javascript">
  var txt = "";
  //擷取視窗的高度與寬度（包括工具欄/滾動）
  txt += "<p>outerWidth: " + window.outerWidth + "</p>";
txt += "<p>outerHeight: " + window.outerHeight + "</p>";//
  document.getElementById("demo").innerHTML = txt;
  </script>
</body>
</html>
JavaScript參考手冊 Window 對象 5125字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>

<p id="demo"></p>
<script>
//window.innerWidth:浏覽器的寬度 
//document.body.clientWidth:網頁可見區域寬
//document.documentElement.clientWidth是該頁面的寬度
//這下面的代碼了解起來就是根據浏覽器的縮小放大調整寬高度
var w=window.innerWidth
      || document.documentElement.clientWidth
      || document.body.clientWidth;
var h=window.innerHeight
      || document.documentElement.clientHeight
      || document.body.clientHeight;
x=document.getElementById("demo");
x.innerHTML="浏覽器window寬度: " + w + ", 高度: " + h + "。"
</script>

</body>
</html>
JavaScript參考手冊 Window 對象 5125字

Window localStorage 屬性 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<div id="result"></div>

  <script type="text/javascript">
  //什麼是本地存儲？
  //本地儲存的作用：把一些資料記錄在浏覽器中，是浏覽器提供給我們的一些本地存儲資料的機制
  

  
  //使用 localStorage 建立一個本地存儲的 name/value 對，name="name" value="cyg", 然後檢索 "name" 的值，并插入到 id="result" 的元素上
  if(typeof(Storage)!=='undefined')
  {
    localStorage.setItem("name",'cyg');
    document.getElementById('result').innerHTML=localStorage.getItem('name');
  }
  else
  {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
  }
  /*localStorage 和 sessionStorage 屬性允許在浏覽器中存儲 key/value 對的資料。

localStorage 用于長久儲存整個網站的資料，儲存的資料沒有過期時間，直到手動去删除。

localStorage 屬性是隻讀的。

提示: 如果你隻想将資料儲存在目前會話中，可以使用 sessionStorage 屬性， 該資料對象臨時儲存同一視窗(或标簽頁)的資料，在關閉視窗或标簽頁之後将會删除這些資料。*/
  </script>
</body>
</html>
JavaScript參考手冊 Window 對象 5125字
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<p><button onclick="clickCounter()" type="button">點我!</button></p>
<div id="result"></div>
<p>點選按鈕檢視數字會自動增加。</p>
<p>關閉浏覽器，重新打開這個頁面點選按鈕，可以看到之前的資料是有保留的。</p>
  <script type="text/javascript">
    function clickCounter()
    {
         if(typeof(Storage) !== "undefined") {//判斷是否支援Storage類型的資料，比如這個localStorage
      if(localStorage.clickcount)//clickcount是點選的數量
      {
        localStorage.clickcount=Number(localStorage.clickcount)+1;//類型是整型，然後genus點選+1
      }
      else
      {
        localStorage.clickcount=1;//預設是1
      }
      document.getElementById("result").innerHTML = "你在按鈕上已經點選了 " + localStorage.clickcount + " 次"
    }
    else
    {
      document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
    }
  }
  </script>
</body>
</html>
JavaScript參考手冊 Window 對象 5125字

Window name 屬性 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
<input type="button" value="打開我的視窗" onclick="openWin()" /><!--onclick點選事件。點選的是penWin()，也就是說調用penWin()函數-->
  <script type="text/javascript">
  var myWindow;
  function openWin()
  {
    myWindow=window.open('','MsgWindow','width=200,height=100');
    //第一個是要打開的文檔，第二個參數是視窗的名稱。第三個參數是參數的寬高度
    myWindow.document.write("<p>視窗名稱為: " + myWindow.name + "</p>");
  }
  </script>
</body>
</html>

Window opener 屬性 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script>
function openWin(){
  myWindow=window.open('','','width=200,height=100');//子視窗的寬度200 高度100
  myWindow.document.write("<p>這是我的視窗</p>");//往子視窗寫東西
  myWindow.opener.document.write("<p>這個是源視窗!</p>");//myWindow.opener.document.write的意思是向父視窗寫東西
}
</script>
</head>
<body>

<input type="button" value="打開我的視窗" onclick="openWin()" /><!--onclick=點選事件-->

</body>
</html>
javascript 前端 開發語言 html 資料
上一篇: 拿别人的vue3.0項目怎麼運作呢？報錯資訊·：npm ERR! Cannot read properties of null (reading ‘pickAlgorithm‘) npm ERR!
下一篇: 什麼是主表？什麼是從表？

繼續閱讀