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

Question

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

you don't need to put all screenies here. this ain't a forum. explaining would just do fine. — Joseph
– Joseph, Commented Apr 30, 2012 at 7:40
@ThiefMaster: Perhaps he has to develop for the asian market. IE6 is still nearly a quarter of the market in China, for instance. — T.J. Crowder
– T.J. Crowder, Commented Apr 30, 2012 at 7:45
@Joseph Thanks for the suggestion. I am new here hence I am still learning the presentation tenchiques. I was trying to give as much info I can give. I will keep that in mind next time. By the way do you have a solution for my problem? — Vikram Rao
– Vikram Rao, Commented Apr 30, 2012 at 7:45
@T.J. Crowder Thanks for having a proper market knowledge and guessing the issue right. — Vikram Rao
– Vikram Rao, Commented Apr 30, 2012 at 7:48

Yan Berk · Accepted Answer · 2012-04-30 07:55:27Z

2

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

answered Apr 30, 2012 at 7:55

Yan Berk

14.5k9 gold badges58 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrew Brock · Accepted Answer · 2012-04-30 08:02:23Z

Lets lay out the 2nd code in a pretier format

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

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

Javascript has a nice little trick where the || (or) operator can be used as an if/else

The line var x=w.innerWidth||e.clientWidth||g.clientWidth; for example is a shorthand of the following

var x = undefined;
if (w.innerWidth) {
    x = w.innerWidth;
} else if (e.clientWidth) {
    x = e.clientWidth;
} else if (g.clientWidth) {
    x = g.clientWidth;
}

So, what is happening here is it that IE does not define the variable window.innerWidth, hence you are getting undefined. Yout code stops here, whereas the working code tries a few other variables, those been document.documentElement.clientWidth (the width of the document) and document.getElementsByTagName('body')[0].clientWidth (the width of the page body)

Internet explorer defines 1 of these, which is giving you the correct result

Back to your code:

Place the following somewhere in the HTML page

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

echo "  var sz = GetScreenSize()\n"; //Call the function to get the screen size
echo "  location.href='${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}&width=' + sz.x + '&height=' + sz.x;\n";

Thanks for the response. I tried wrapping the last two echo lines in a <?php ?> tag and this is the result on screen var sz = GetScreenSize() location.href='/test.php?&width=1228&height=745&width=' + sz.x + '&height=' + sz.x; Am i missing something?

Jan Jongboom · Accepted Answer · 2012-04-30 07:56:23Z

0

Just combine the two scripts? Echo this in your tags:

echo("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;")

echo("location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}"
        . "&width=\" + x + \"&height=\" + y;\n";")

answered Apr 30, 2012 at 7:56

Jan Jongboom

27.5k10 gold badges85 silver badges121 bronze badges

1 Comment

Vikram Rao Over a year ago

nop it there is some systax error in your code. Dreamweaver is showing as syntax error.

farness · Accepted Answer · 2012-04-30 09:34:02Z

Thanks Andrew Brock, Your code also worked for me...

<?php
        echo "<br /><br />";
        if (isset ($_REQUEST['width'])) {
            $width=$_REQUEST['width'];
        } else {
            $width=0;
        }

        if (isset ($_REQUEST['height'])) {
            $height=$_REQUEST['height'];
        } else {
            $height=0;
        }
    ?>
    <html>
            <head>
                    <title> width=<?echo $width?> & height=<?echo $height?> </title>
                    <script type="text/javascript">
                        function GetScreenSize() {
                            var w=window;
                            var d=document;
                            var e=d.documentElement;
                            var g=d.getElementsByTagName('body')[0];
                            var x=w.innerWidth||e.clientWidth||g.clientWidth;
                            var y=w.innerHeight||e.clientHeight||g.clientHeight;
                            return {x:x, y:y};
                        }
                        var size=GetScreenSize();
                    </script>
            </head>
            <body>
                    <br />
                    width is <?echo $width?>
                    <br />
                    height is <?echo $height?>
            </body>
    </html>
    <?php
        if (!isset($_REQUEST['width'])&& !isset($_REQUEST['height'])){
            echo "<script language='javascript'>\n";
            echo "  var sz = GetScreenSize()\n";
            echo "  location.href=\"${_SERVER['SCRIPT_NAME']}?${_SERVER['QUERY_STRING']}"
                    . "&width=\" + sz.x + \"&height=\" + sz.y;\n";
            echo "</script>\n";
      }
    ?>

try "http://192.168.0.9:6060/second/temp_1.php"

and you'll get

Result

Thanks

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related