window.onresize監聽事件

時間 2019-12-08

標籤 window.onresize window onresize 監聽事件欄目 Windows 简体版

原文原文鏈接

最近忙於第二版網站功能bug製做修改，交互邏輯完成，可是準備換一下佈局和總體色調，算是一次小改，趁機會把一直沒有實現的功能抽時間解決了下——自適應屏幕高度。css

頁面的總體佈局如圖基本分爲3個div：（網站具體頁面截圖不透露了，以3個div演示）html

最上方的藍色部分爲導航欄，中間帶圖像的淺色區域爲交互顯示區域，，底部藍色區域爲縮略圖區域。jquery

由於是作人工智能醫療的網站，交互的東西會多一些，圖中的片子是b超甲狀腺的影像，能夠進行畫筆、圈取病變、ct影像還有調節影像窗寬窗位的功能、等等。底部的縮略圖會顯示當前病例的文件（1~n張圖像）的縮略圖。canvas

最開始只想到了屏幕寬度的自適應，由於根據屏幕不一樣的寬度，繪製不一樣數量的縮略圖。但在實際測試中發如今不一樣屏幕上，畫布canvas的長度和寬度是固定的，也就形成大屏幕上正好一屏顯示了，小屏幕筆記本，一屏顯示不下。windows

就形成，無限的滾動查看屏幕（切換縮略圖，canvas交互，導航欄工具使用，三部分的切換），體驗感不好。api

最近有時間修正了一下這個bug，不管在任何分辨率的屏幕上都正好盛滿一整屏幕。瀏覽器

最初的想法就是直接設置div百分比不就好了？這種辦法可行，但不適用個人網站，很簡單的實現方法有侷限性工具

<html>
<head>
<style type="text/css">
html,body{height:100%; width:100%; overflow:hidden; margin:0;
padding:0;}
.main{width:100%; height:100%; overflow:hidden; margin:0;padding:0;}
.div1{width:100%; height:80px; color:#fff;background-color:#369; text-align:center;}
.div2{width:100%; height:100%;color:#fff;background-color:#FF0000;text-align:center;"}
</style>
</head>
<body>
<div class="div1">
  div1
</div>
<div class="main">
  <div class="div2">
    div2
  </div>
</div>
</body>
</html>

能夠複製代碼去看一下，就不截屏了，這個方法只限於小部分：div.main是撐滿屏幕100%的，也不是徹底充滿，在先繪製div1後，剩下屏幕的位置會所有充滿，也就是說，若是mian後邊還有div，那就直接下一屏幕了，當前屏幕已經被div1:100px；和剩下的main100%沾滿了。按照這樣實現底下的縮略圖沒有了，若是給main設置個80%或者90%，也不能無縫的實現。
佈局

最後仍是要js動態實現，實現初版：div根據屏幕初始高度自適應，基本功能實現，可是高度的設置只限於documen.ready,完成後，調整瀏覽器的尺寸，div固定大小了，並無動態調整。有沒有一種監聽瀏覽器窗口變化的事件呢？後來上網查詢，查到了windows.onresize這個api，通過調整最終實現了功能。測試

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <style>
    </style>
</head>
<body>
  <div style="width:100%;height:100px;background-color:blue;">
    @01
  </div>
  <div id="main" style="background-color: lightblue;width: 100%;height:100px;">
<div id="show_div" style="background-color: lightblue;width: 100%;height: 100%;text-align:center;">
  <canvas id ="canvas"  style="width:720px; height: 100%;z-index:2;"></canvas>
</div>
</div>
<div style="width:100%;height:100px;background-color:blue;">
  @03
</div>

</body>
</html>

js代碼:

<script>
var cv=document.getElementById("canvas");
var context=cv.getContext("2d");

$(document).ready(function() {
 
  var clientheight=document.documentElement.clientHeight;
  console.log(clientheight);
  console.log("\n %c Feng V1.0 %c \n\n","color: #fadfa3; background: #4f98fd; padding:5px 0;","background: #fadfa3; padding:5px 0;");
  $("#main").get(0).style.height=clientheight-200+"px";
  $("#canvas").get(0).style.width=(clientheight-200)*1.25+"px";
  console.log($("#main").get(0).style.height);


 var imgLoad=new Image();
  imgLoad.src = "001.jpg";
    imgLoad.onload = function (){
      context.clearRect (0 , 0 , canvas.width , canvas.height ) ;
      context.drawImage (imgLoad,0,0,canvas.width,canvas.height) ;
      console.log("imgLoad.width:"+imgLoad.width);
      console.log("imgLoad.height:"+imgLoad.height);
    }
});
    window.onresize = change;
    function change(){
      var clientheight=document.documentElement.clientHeight;
      console.log(clientheight);
      $("#main").get(0).style.height=clientheight-200+"px";
       //圖像尺寸爲5:4，這裏給width也作一個動態調整。
      $("#canvas").get(0).style.width=(clientheight-200)*1.25+"px";
      console.log($("#main").get(0).style.height);
    }
</script>

有兩點注意：每一次d都要從新爲clientheight賦值，網上說在谷歌瀏覽器裏，windows.onresize會執行兩次，我沒有遇到，若是遇到這個狀況，設置一個判斷便可

相關標籤/搜索

每日一句

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