get dimensions of browser via javascript_问答_开发者

I am trying to get the dimensions of my browser window using java script. The function I am using to do this is:

function getDimensions(){
    var myWidth = document.documentElement.clientWidth; 
    var myHeight = document.documentElement.clientHeight; 
    var returnstring = myWidth+','+myHeight;
    document.applets[0].postDimensions(returnstring); 
}

But the width and the height returned are both zero. I don't understand why.

The source is listed below.

<html>
<head>
    <title>Emscribe Dx Review Screen</title>
<style type="text/css">
body {

    text-align: left; /* for IE */
}
#container {

    text-align: left; /* counter the body center */
    /*width: 1250px; */
}

</style>




</head>
<BODY id="App1" style=" height:50%;" BGCOLOR="#3D59AB">
<div id="container" style="height:75%">
    <div name= "buttonbar" id = "buttonbar" style="cursor:wait;" style="width:100%;   
height:5%;">
      <SCRIPT LANGUAGUE = "JavaScript" src="scripts/ingenix.js"></SCRIPT>


<SCRIPT LANGUAGE="JavaScript">

function getDimensions(){
var myWidth = document.documentElement.clientWidth; 
var myHeight = document.documentElement.clientHeight; 
var returnstring = myWidth+','+myHeight;
document.applets[0].postDimensions(returnstring); 

}

</SCRIPT>



<FORM NAME="CODINGFORM">         
   <TABLE cellpadding=5 cellspacing=3 border=2 width="100%" height="10%" Align="left">
 <tr width="100%">
<td width="15%" align="center">

      <input type="text" name="AccountNumber" id="AccountNumber" size="12" title="Enter   
 the account to be downloaded here."
        onkeypress="keydownpress(this.form)" style="cursor:wait; font-weight: bold; "  
disabled=true  /> 
      <font style="display:block;" color="white" size="2" face="arial">Account</font>

  <div style="display:inline;">
    <div style="display:inline; float:left;">
      <button name="download" value="download" type="button" disabled=true
        style="background-color:white; color:black;  cursor:wait;"
        title = "Click here to download an account." onClick="doDownload(this.form)">
        <img src="picts/down.gif" alt="" width="20" height="20" name="downimage"/> 
      </button>
      <font  style="display:block; font-size: 11px;" color="white" face="arial" 
id="downfont"> Download</font>
    </div>
     <div style="display:inline; float:right; margin-right: 5px;">
                    <button name="save" value="save" type="button" 
style="background-color:white; color:black; cursor:wait;" disabled=false  
                      onClick="doSave()"
                      title = "Click here to save your work.">
                      <img src="picts/save.png" alt="" width="20" 
height="20" id="saveimage"/>
                  </button>

                  <font style="display:block; font-size: 11px;" 
color="white"   face="arial" id="savefont"> Save</font>
                </div>
  </div>
<div style="display:inline; float:none; margin-right: 5px;">
      <button name="upload" value="upload" type="button" style="background-color:white; 
 color:black; cursor:wait;" disabled=true  
        onClick="doUpload()"
        title = "Click here to return account to database.">
        <img src="picts/gup.gif" alt="" width="20" height="20" id="upimage"/>
      </button>

      <font style="display:block; font-size: 11px;" color="gray"   face="arial" 
id="upfont"> Upload</font>
    </div>
  </div>


</td>




<td width="7%" height="75" align=center>
  <button name="encode" value="encode" type="button"  style="background-color:white; 
color:black; cursor:wait;" disabled=true  title = "Click here when ready to   send 
entries to encoder." onClick="doEncoding()">
    <img src="picts/e.gif" alt="" width="20" height="20" />  
  </button>

<br><font color="white" size="2" face="arial"> Encoder</font></td>


<td width="10%" align="center">
  <div style="text-align:center;">
<span style="text-align:center; display:block;"><button name="warning" value="warning"    
type="button" disabled = true style="cursor:wait
  style="background-color:white; color:black;"
  onClick="displayDrgElements()">
<img src="picts/greywarning.gif" alt="" width="20" height="20"  name="warningimg"/> 
</button>
</span>
<span style="text-align:center; display:block;"><input type="text" align="center"   
name="RDRG" id="RDRG" size="10" disabled = true title="Running DRG."   
style="height:20px; font-size: 10px;  padding-bottom:0px; margin-bottom:0px;"   
readonly/></span>
<span style="text-align:center;  display:block;"><font id="runningD" color="white" 
size="2" face="arial" style="font-size: 11px; padding-top:0px; margin-top:0px; 
  display:block;">Running DRG</font></span>

</div>

  <div style="text-align:center;">
  <span style="text-align:center;  display:block;"><input type="text" align="center" 
 name="reimburse" id="reimburse" size="10" style="cursor:wait; height:20px; font-size: 
 10px;  padding-bottom:0px; margin-bottom:0px;" disabled = true title="Running DRG." 
 readonly/></span>
 <span style="text-align:center;  display:block;"><font id="EstReimburse" color="white" 
  size="2" face="arial" style="font-size: 11px; padding-top:0px; margin-top:0px; 
 display:block;">Est. Reimburse</font></span>
 </div>

 </td>


<td align=center>
 <div style="float:left; height: 100px;">
 <div id="bannerOption1Div" width="10%" align=center style="display:none">
   <input disabled=true type="text" name="bannerOption1Source" 
id="bannerOption1SourceId" size="20" style="height:20px; font-size: 12px;  padding-
bottom:0px; margin-bottom:0px;"/>
   <font id="bannerOption1TextId" color="white" size="2" face="arial" style="font-size: 
11px; padding-top:0px; margin-top:0px; display:block;">None</font>
 </div>
 <div id="bannerOption2Div" width="10%" align=center style="display:none">
   <input disabled=true type="text" name="bannerOption2Source" 
id="bannerOption2SourceId" size="20" style="height:20px; font-size: 12px; padding-  
bottom:0px; margin-bottom:0px;"/>

   <font id="bannerOption2TextId" color="white" size="2" face="arial" style="font-size: 
 11px; padding-top:0px; margin-top:0px; display:block;">None</font>
 </div>
 <div id="bannerOption3Div" width="10%" align=center style="display:none">
   <input disabled=true type="text" name="bannerOption3Source" 
id="bannerOption3SourceId" size="20" style="height:20px; font-size: 12px; padding-

bottom:0px; margin-bottom:0px;"/>

   <font id="bannerOption3TextId" color="white" size="2" face="arial" style="font-size:   
 11px; padding-top:0px; margin-top:0px; display:block;">None</font>
  </div>
 </div>
 <div style=" margin-left:10px; float:left;  height: 100px;">
 <div id="bannerOption4Div" width="10%" align=center style="display:none">
   <input disabled=true type="text" name="bannerOption4Source" 
  id="bannerOption4SourceId" size="20" style="height:20px; font-size: 12px;  padding-
  bottom:0px; margin-bottom:0px;"/>

   <font id="bannerOption4TextId" color="white" size="2" face="arial" style="font-size: 
11px; padding-top:0px; margin-top:0px; display:block;">None</font>
 </div>
 <div id="bannerOption5Div" width="10%" align=center style="display:none">
   <input disabled=true type="text" name="bannerOption5Source" 
id="bannerOption5SourceId" size="20" style="height:20px; font-size: 12px;  padding-
bottom:0px; margin-bottom:0px;"/>

   <font id="bannerOption5TextId" color="white" size="2" face="arial" style="font-size: 
11px; padding-top:0px; margin-top:0px; display:block;">None</font>
 </div>
 <div id="bannerOption6Div" width="10%" align=center style="display:none">
   <input disabled=true type="text" name="bannerOption6Source" 
id="bannerOption6SourceId" size="20" style="height:20px; font-size: 12px;  padding-
bottom:0px; margin-bottom:0px;"/>

   <font id="bannerOption6TextId" color="white" size="2" face="arial" style="font-size: 
11px; padding-top:0px; margin-top:0px; display:block;">None</font>
 </div>
</div>
<div style=" margin-left:10px; float:left;  height: 100px;">
 <div id="bannerOption7Div" width="10%" align=center style="display:none">
   <input disabled=true type="text" name="bannerOption7Source" 
id="bannerOption7SourceId" size="20" style="height:20px; font-size: 12px;  padding-
bottom:0px; margin-bottom:0px;"/>

   <font id="bannerOption7TextId" color="white"开发者_开发百科 size="2" face="arial" style="font-size: 
11px; padding-top:0px; margin-top:0px; display:block;">None</font>
 </div>
 <div id="bannerOption8Div" width="10%" align=center style="display:none">
   <input disabled=true type="text" name="bannerOption8Source" 
id="bannerOption8SourceId" size="20" style="height:20px; font-size: 12px;  padding-
bottom:0px; margin-bottom:0px;"/>

   <font id="bannerOption8TextId" color="white" size="2" face="arial" style="font-size: 
11px; padding-top:0px; margin-top:0px; display:block;">None</font>
 </div>
  <div id="bannerOption9Div" width="10%" align=center style="display:none">
   <input disabled=true type="text" name="bannerOption9Source" 
   id="bannerOption9SourceId" size="20" style="height:20px; font-size: 12px;  padding- 
   bottom:0px; margin-bottom:0px;"/>

   <font id="bannerOption9TextId" color="white" size="2" face="arial" style="font-size: 
    11px; padding-top:0px; margin-top:0px; display:block;">None</font>
    </div>
  </div>
  <div style=" margin-left:10px; float:left;  height: 100px;">
    <div id="bannerOption10Div" width="10%" align=center style="display:none">
   <input disabled=true type="text" name="bannerOption10Source" 
   id="bannerOption10SourceId" size="20" style="height:20px; font-size: 12px;  padding-
   bottom:0px; margin-bottom:0px;"/>

   <font id="bannerOption10TextId" color="white" size="2" face="arial" style="font-
  size: 11px; padding-top:0px; margin-top:0px; display:block;">None</font>
  </div>
  <div id="bannerOption11Div" width="10%" align=center style="display:none">
   <input disabled=true type="text" name="bannerOption11Source" 
  id="bannerOption11SourceId" size="20" style="height:20px; font-size: 12px;  padding-
   bottom:0px; margin-bottom:0px;"/>

   <font id="bannerOption11TextId" color="white" size="2" face="arial" style="font-
   size: 11px; padding-top:0px; margin-top:0px; display:block;">None</font>
 </div>
 <div id="bannerOption12Div" width="10%" align=center style="display:none">
   <input disabled=true type="text" name="bannerOption12Source" 
   id="bannerOption12SourceId" size="20" style="height:20px; font-size: 12px;  padding-
   bottom:0px; margin-bottom:0px;"/>

   <font id="bannerOption12TextId" color="white" size="2" face="arial" style="font-
   size: 11px; padding-top:0px; margin-top:0px; display:block;">None</font>
   </div>
  </div>


  <div style=" margin-left:10px; float:left;  height: 100px;">
 <div id="bannerOption13Div" width="10%" align=center style="display:none">
   <input disabled=true type="text" name="bannerOption13Source" 
  id="bannerOption13SourceId" size="20" style="height:20px; font-size: 12px;  padding-
  bottom:0px; margin-bottom:0px;"/>

   <font id="bannerOption13TextId" color="white" size="2" face="arial" style="font-
size: 11px; padding-top:0px; margin-top:0px; display:block;">None</font>
 </div>
 <div id="bannerOption14Div" width="10%" align=center style="display:none">
   <input disabled=true type="text" name="bannerOption14Source" 
  id="bannerOption14SourceId" size="20" style="height:20px; font-size: 12px;  padding-
   bottom:0px; margin-bottom:0px;"/>

   <font id="bannerOption14TextId" color="white" size="2" face="arial" style="font-
  size: 11px; padding-top:0px; margin-top:0px; display:block;">None</font>
   </div>
 <div id="bannerOption15Div" width="10%" align=center style="display:none">
   <input disabled=true type="text" name="bannerOption15Source" 
id="bannerOption15SourceId" size="20" style="height:20px; font-size: 12px;  padding-
 bottom:0px; margin-bottom:0px;"/>

   <font id="bannerOption15TextId" color="white" size="2" face="arial" style="font-
size: 11px; padding-top:0px; margin-top:0px; display:block;">None</font>
 </div>
 </div>



  </td>


   <td id="emDropDownContainer" width="9%" align=center style="display:none">
 <font color="white" size="2" face="arial">CPT Code</font>
 <br>
 <div id="cptDiv">
     <select id='selCptId' name='selectedCptId'>
      <option  value="-1">--None--</option>
 </select>
</div>
</td>

</tr>
</table>
</FORM>
 </div>

 <div style="width:100%; height:89%; margin-left:0px;>
 <TABLE cellpadding=0 cellspacing=0 border=0 width="100%" height="90%">
<tr style="height:100%;">   
    <td VALIGN="TOP">   
       <div  style="visibility:visible; background:white; foreground:black; font-   
size:200%; width:100%; height:10%; margin-left:100px; margin-top:5px; margin- 
right:100px; text-align:center; cursor:wait;" id="msgdiv">
            <p> Please wait while Fusion CAC Loads </p>
        </div>
        <div align="center" style="cursor:wait; height:100%;"  id="divapp" 
name="divapp" >
            <APPLET NAME="RevApp2" CODE="RevApp2.class" id="myapplet" name="myapplet" 
style="visibility:hidden;"
              ARCHIVE ="CoderDx.jar,xpp3-1.1.3.4.C.jar,xml-apis.jar,jcommon-
1.0.16.jar,jfreechart-1.0.13.jar,MultiSplit.jar,balloontip-1.1.1.jar,artificialmed.jar" 
WIDTH=99% HEIGHT=100%>
                <PARAM NAME = USERID VALUE = "#DxWebTemplate" />
                <PARAM NAME = URL VALUE = "#IPAddress" />
                <PARAM NAME = PATHNAME VALUE = "#PathName" />
                <PARAM NAME = SessionID VALUE = "#SessionID" />
                <PARAM NAME = Role VALUE = "#Role" />
            </APPLET>
    </div>  
    </TD>
</TR>  

</table>

</div>
</div>
</BODY>
</HTML>

The original code was obtained by doing a Google search. As we know, Google searches do not always provide the correct answer. I am aware that there is antiquated code in this html but that is not a priority right now. To the point, the answer was found on another web page. I post for others benefit:

function getDimensions()
{
  var myWidth = document.documentElement.offsetWidth;
  var myHeight = document.documentElement.offsetHeight;
  var returnstring = myWidth+','+myHeight;
  document.applets[0].postDimensions(returnstring);
}