Search code examples
javascriptphpinternet-explorer-7internet-explorer-6

Passing JavaScript Variable to PHP - Error in IE6, IE7 and IE8


I am trying to get the Browser Viewport bay passing a Javascript Variable to PHP with the following code:

First Code

<?php
if (isset($_GET['width']) AND isset($_GET['height'])) {
  // output the geometry variables
  echo "Screen width is: ". $_GET['width'] ."<br />\n";
  echo "Screen height is: ". $_GET['height'] ."<br />\n";
} else {
  // pass the geometry variables
  // (preserve the original query string
  //   -- post variables will need to handled differently)

  echo "<script language='javascript'>\n";
  echo "  location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}"
            . "&width=\" + screen.width + \"&height=\" + screen.height;\n";
  echo "</script>\n";
  exit();
}
?>

The above code gives me the Screen Width and the Height and this works fine in all browsers including IE6, 7 and 8 too.

But the moment I change it to from screen.width to window.innerWidth and screen.height to window.innerHeight

like this . "&width=\" + window.innerWidth + \"&height=\" + window.innerHeight;\n";

It works fine in all browsers but for IE6, 7 and 8 it says

Screen width is: undefined
Screen height is: undefined

While surfing the net for solutions I found another piece of code:

Second Code

<script type="text/javascript">
var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth,y=w.innerHeight||e.clientHeight||g.clientHeight;

document.write('<p>Your viewport size is '+x+' x '+y+'</p>');
</script>

This code displays the Browser Viewport and it works fine in all browsers including IE6, 7 and 8 too.

When I run both the codes together in a php file the first one shows as undefined abd the second one works perfectly. Please see the screenshots below

I am not a newbie programmer and not able to connect the second code to the first logic. Kindly help me do so.

Here are the screen shots of all browsers:

Internet Explorer 6

Internet Explorer 6

Internet Explorer 7

Internet Explorer 7

Internet Explorer 8

Internet Explorer 8

Internet Explorer 9

Internet Explorer 9

Forefox

Forefox

Google Chrome

Google Chrome

Opera

Opera

Safari

Safari


Solution

  • window.innerHeight/Width are not supported by IE8 and lower. Try using document.documentElement.clientHeight/document.documentElement.clientWidth