2. 程式人生 > >window.onload and showModalDialog根據內容自動調整視窗大小

window.onload and showModalDialog根據內容自動調整視窗大小

阿新 • • 發佈：2019-01-22

 1 showModalDialog根據內容自動調整視窗大小 :在對話方塊的頁面中加入如下程式碼：

  1. window.onload = function()
  2.      {
  3. if( document.body.scrollWidth > (window.screen.availWidth-100) ){ 
  4.              window.dialogWidth = (window.screen.availWidth-100).toString() + "px"
  5.          }else{ 
  6.              window.dialogWidth = (document.body.scrollWidth +50).toString() + 
    "px"
  7.          }     
  8. if( document.body.scrollHeight > (window.screen.availHeight-70) ){ 
  9.              window.dialogHeight = (window.screen.availHeight-50).toString() + "px"
  10.          }else{ 
  11.              window.dialogHeight = (document.body.scrollHeight +115).toString() + "px"
  12.          }     
  13.          window.dialogLeft = ((window.screen.availWidth - document.body.clientWidth) / 2).toString() + 
    "px"
  14.          window.dialogTop = ((window.screen.availHeight - document.body.clientHeight) / 2).toString() + "px"
  15.      }

2window.onload or other

在網頁設計中，總要用到一些動態效果，而這些效果之中，有一些是需要頁面載入完成時才可以做的，比如要給頁面中的每一個連結加上hover時的特效，那麼就需要在頁面的所有程式碼已經下載完畢時再進行特效，這樣才能保證頁面裡的每一個連結都不會遺漏。如果這步工作放在head中，那麼，做與不做一個樣。

再者，現在網頁設計講究行為、結構、表現分離，比如在最近的一次改版中，我把

我的blog側邊欄的展開與摺疊的功能放在了JS中新增，並不是在原始碼裡直接設定onclick事件新增好的。因為函式呼叫不是直接直接而是後來新增的，我就要考慮什麼時候來用JS新增側邊欄的展開與摺疊了。

功能的新增函式所在的指令碼放在了head區引入，當然不能在腳本里直接呼叫這個函式來進行功能的新增，因為那個時候邊欄還沒有載入，用document.getElementById會出現找不到物件的錯誤，然後邊欄的展開與摺疊功能就沒有。

那麼，從這一點知道，功能的新增是需要在要處理的內容已經載入完成的情況下才能新增。

那什麼時候側邊欄已經載入完畢了呢，許多人自然而然地就想到了window.onload。是的，在window.onload被呼叫時，整個頁面已經載入完成，那麼邊欄也一定載入完畢，這個時候做新增onclick響應函式是肯定不會出現找不到物件的錯誤的。

  1. <html>
  2. <head>
  3. <metaname="author"content="www.xujiwei.cn"/>
  4. <metaname="description"content="ue test from xujiwei"/>
  5. <title>ue test1</title>
  6. <styletype="text/css">
  7.     #blockHead {
  8.         background: blue; color: white; width: 300px; padding: 1em; cursor: pointer; border: 1px solid blue;
  9.     }
  10.     #blockContent {
  11.         border: 1px solid blue; width: 300px; padding: 1em;
  12.     }
  13. </style>
  14. <scripttype="text/javascript">
  15. window.onload=function() {
  16.         document.getElementById("blockHead").onclick=function() {
  17.             if(document.getElementById("blockContent").style.display=="")
  18.                 document.getElementById("blockContent").style.display="none";
  19.             else
  20.                 document.getElementById("blockContent").style.display="";
  21.         }
  22.     }
  23. </script>
  24. </head>
  25. <body>
  26. <divid="blockHead">block Head</div>
  27. <divid="blockContent"><imgsrc="http://www.xujiwei.cn/logo.gif"alt="hotheart"/>block Content</div>
  28. </body>
  29. </html>

如此，便給邊欄的Member模組加上了摺疊功能。但是，onload會是最好的選擇嗎？

回答是否定的，為什麼，因為window.onload只有在整個頁面完全載入完成，包括一些因為網速或者連結失效的內容也全部載入完成或者確認無效時才會被呼叫。那麼，萬一，如果這個頁面裡有某些元素由於某些原因而得不到及時的載入，就會延長整個頁面的載入時間，window.onload的執行時刻也會相應的往後移。譬如下面這段

  1. <html>
  2. <head>
  3. <metaname="author"content="www.xujiwei.cn"/>
  4. <metaname="description"content="ue test from xujiwei"/>
  5. <title>ue test2</title>
  6. <styletype="text/css">
  7.     #blockHead {
  8.         background: blue; color: white; width: 300px; padding: 1em; cursor: pointer; border: 1px solid blue;
  9.     }
  10.     #blockContent {
  11.         border: 1px solid blue; width: 300px; padding: 1em;
  12.     }
  13. </style>
  14. <scripttype="text/javascript">
  15. window.onload=function() {
  16.         document.getElementById("blockHead").onclick=function() {
  17.             if(document.getElementById("blockContent").style.display=="")
  18.                 document.getElementById("blockContent").style.display="none";
  19.             else
  20.                 document.getElementById("blockContent").style.display="";
  21.         }
  22.     }
  23. </script>
  24. </head>
  25. <body>
  26. <divid="blockHead">block Head</div>
  27. <divid="blockContent"><imgsrc="http://www.xujiwei.c_n/logo.gif"alt="hotheart"/>block Content</div>
  28. </body>
  29. </html>

因為http://www.xujiwei.c_n/logo.gif中的域名是不合法的（域名中不可以包含下劃線），但是瀏覽器不會去判斷，仍舊照常去解析，然後出現不可到達的錯誤，再用圖片的替代文字來代替圖片，這需要時間。在這段時間裡，window.onload都不會執行，因為瀏覽器認為頁面還沒有載入完成，所以還不是呼叫window.onload的時候，也就是說，這個摺疊功能一直沒有新增。

但是使用者的操作不會受這一點內容的影響。在整個頁面的輪廓出來以後，使用者就會開始做自己要做的事，而不會等到瀏覽器確認那一點點的東西是不可以成功載入的，執行完window.onload才去做自己要做的事。

換句話說，就是這些功能的新增要在使用者覺得他可以做他自己要做的事之前進行，中間不能因為一些未知的原因而擱置。那麼，這些功能的新增應該放在什麼位置？我的做法是在頁面的HTML已經載入時去呼叫功能新增函式，再加上HTML語法規則，把功能新增函式的呼叫放在了body標籤結束之前，即：

  1. <html>
  2. <head>
  3. <metaname="author"content="www.xujiwei.cn"/>
  4. <metaname="description"content="ue test from xujiwei"/>
  5. <title>ue test3</title>
  6. <styletype="text/css">
  7.     #blockHead {
  8.         background: blue; color: white; width: 300px; padding: 1em; cursor: pointer; border: 1px solid blue;
  9.     }
  10.     #blockContent {
  11.         border: 1px solid blue; width: 300px; padding: 1em;
  12.     }
  13. </style>
  14. <scripttype="text/javascript">
  15.     function initApp() {
  16.         document.getElementById("blockHead").onclick=function() {
  17.             if(document.getElementById("blockContent").style.display=="")
  18.                 document.getElementById("blockContent").style.display="none";
  19.             else
  20.                 document.getElementById("blockContent").style.display="";
  21.         }
  22.     }
  23. </script>
  24. </head>
  25. <body>
  26. <divid="blockHead">block Head</div>
  27. <divid="blockContent"><imgsrc="http://www.xujiwei.c_n/logo.gif"alt="hotheart"/>block Content</div>
  28. <scripttype="text/javascript">
  29.     initApp();
  30. </script>
  31. </body>
  32. </html>

這個時候，雖然瀏覽器仍然在試圖解析www.xujiwei.c_n，去下載logo.gif，但是摺疊功能已經成功添加了，使用者進行他的操作已經沒有問題，至於那張圖片是否能顯示出來，已經不會影響使用者對整個頁面的使用。

在test1中，可以看出如果整體頁面中沒有影響頁面載入的內容，那麼window.onload進行頁面功能新增也是可以的，但是現在的網頁做出來誰能保證其中的內容一直有效呢，於是在test2中可以看到如果頁面中有載入不了的內容，window.onload可能會在使用者離開頁面之後還沒有執行，就因為那麼一點內容載入不了，導致window.onload不能執行，接著就是一些功能使用者不能用，接著使用者感覺就不好，接著使用者就離開了本頁。而在test3中，沒有把功能的新增放在window.onload中，而是放在了頁面程式碼的末尾，那麼即不會在執行功能新增函式時，出現找不到物件的錯誤，也不會因為頁面一點載入不了的內容而影響功能的新增，使用者能感覺到的只是有那麼一點點內容可能因為時間或者其他一些原因失效而不能載入，但這並不影響他對整個頁面的使用。

當然，選擇在哪個地方進行頁面功能的新增是個仁者見仁，智者見智的問題。每個人的需要不同，處理方法也會相應的不同。我比較傾向於把頁面中關鍵功能的部分放在body結束標籤之前，而其他一些修飾性的功能如果給連結加上修飾性的title等放在window.onload，這樣即不會影響使用又能有較好的頁面效果。

相關推薦

window.onload and showModalDialog根據內容自動調整視窗大小

 1 showModalDialog根據內容自動調整視窗大小 :在對話方塊的頁面中加入如下程式碼： window.onload = function()      { if( document.body.scrollWidth > (window.screen.ava

textbox根據內容自動調整高度

高度 多行模式 eas textbox box 測量 屬性 ret height 首先將Textbox改為多行模式，設置MutliLine屬性為True，對於textbox中文本有回車的，直接通過textbox.lines.count()可以獲取到行數。 但是單行無回車的

Excel根據批註的內容自動調整批註大小

 Sub test() Dim Cmt As Comment For Each Cmt In ActiveSheet.Comments With Cmt .Shape.TextFrame.AutoSize = True End With Next End Sub

WPF學習筆記（3）：ListView根據內容自動調整列寬

DataGrid中，只要不設定DataGrid的寬度和列寬度，或者將寬度設定為Auto，那麼表格就會根據內容自動調整寬度，以顯示所有內容。但如果是ListView，按以上方法設定，卻達不到列寬自動調整的效果， 列寬在控制元件第一次載入的時候已經確定，之後不會隨著某列資料長度的增加和減少而改變列寬。找了很多方法

winfrom—DataGridView匯出Excel，並根據內容自動調整列寬

 public static void ToExcel(DataGridView dataGridView1)         {             Microsoft.Office.Interop.Excel.Range xlRang;             t

jtable根據內容自動調整列寬

JTable table = new JTable();table.setAutoResizeMode(JTable.AUTO_RESIZE_OFF);有5個引數可進行設定，根據自己的需要修改吧！AUTO_RESIZE_OFF 不自動調整列的寬度；使用滾動條。AUTO_R

Android 自定義TextView實現文字內容自動調整字型大小以適應TextView的大小

/** * 自定義TextView，文字內容自動調整字型大小以適應TextView的大小 * @author yzp */ public class AutoFitTextView extends TextView { private

VMware Workstation 14 Pro 設定自動調整視窗大小

VMware中安裝虛擬機器後，視窗太小，如何設定自動調整視窗大小吶？ 開啟VMware Workstation，點選”檢視”>”自動調整大小”，選中”自動適應客戶機”、”自動適應視窗”

把介面上靜態文字控制元件的尺寸根據文字的內容自動調整大小

函式功能：該函式計算指定的正文字串的高度和寬度。　　　　函式原型：BOOL GetTextExtentPoint32(HDC hdc, LPCTSTR lpString, int cbString, LPSIZE lpSize)；　　　　引數：hdc：裝置環境控制代碼。　　　　lpString：指向正文

把介面上靜態文字控制元件的尺寸根據文字的內容自動調整大小(轉)

   函式功能：該函式計算指定的正文字串的高度和寬度。 函式原型：BOOL GetTextExtentPoint32(HDC hdc, LPCTSTR lpString, int cbString, LPSIZE lpSize)； 參      數：hdc：裝置環境控制代碼。               

Div父容器不根據內容自動撐…

Div即父容器不根據內容自適應高度，我們看下面的程式碼： 程式程式碼 <div id="main"> <div id="content"></div> </div> 當Content內容多時，即使main設定了高度100%或au

根據視窗大小自動調整元素大小

function updatesize(){var bodyw = window.document.body.offsetWidth;if(bodyw <= 790) objmain.style.width="772px";else if(bodyw >= 1016) objmain.style.

iOS 8 Tableview根據AutoLayout自動調整高度

前言：在iOS 8之前，如果要讓Tableview根據內容自動調整大小的話，需要動態的去計算每個cell的高度。太尼瑪操蛋了。iOS 8之後，可以根據AutoLayout來自動調整高度了，原理很簡單。 DataSource中選擇讓iOS自動計算 在C

GridView根據內容自動設定列寬、行高

列寬  protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)         {             if (e.Row.RowType == DataControlR

實現主頁面滾動條隨iframe裡的內容自動調整

由於網頁中使用到了iframe，如果iframe中的內容超過主頁面的範圍後，在iframe的四周會出現滾動條，這樣和主頁面很不協調，所以在網上找了很久，終於找到一段程式碼可以解決這個問題，程式碼如下： 這段程式碼放在<head></head>之間： <script langua

css實現上面div根據內容自動高度，下面的div自動鋪滿剩餘高度

“載入更多”的功能，如果是監聽某個dom元素來實現，你會怎麼做？ 我的設想是： 1、此dom元素要可滾動； 2、判斷合適應該做“載入更多”的邏輯； 在我所做的專案中，引用了bootstrap框架，並且這個dom元素隱藏的還比較深。 <body class='enroll

android字型大小根據解析度自動調整

手機裝置太多，解析度也不一樣，看到網上大部分的適應字型的方法是定義values320×480或value-hdpi方式去處理。 採用第一種的就慘了，很多裝置的解析度是不一樣的，難道要每種都定義嗎？ 採用第二種的在平板電腦裡沒有效果。 最後還是程式碼的方式方便快捷。。。

jQuery解決iframe高度隨內容自動調整

$(function(){ //iframe高度隨內容自動調整 $('.main').load( function(){ var h = $(this).contents().find("body").height();//別的參考不對 $(this).hei

【Android】根據寬度自動調整(參照圖片本身尺寸)高度

很多時候我們需要讓我們的ImageView支援寬度固定，高度自適應的功能。下方程式碼則提供了一個解決方法。如果你有更好的方案，勞煩評論指正。 /** * 根據寬度自動調整(參

背景拉伸為瀏覽器的 4 個端點，根據螢幕自動跳轉大小。

假設你的頁面有1004 X 700 px，但你的背景圖片只有10 X 10px，如果不指定repeat屬性，就會平鋪，就是一張張重複的貼滿你的背景。如果你只指定了-x，就是橫向重複，那麼它就會橫著鋪滿，但不會縱向重複。-y則反之。 background-repeat版本：CSS1 相容性