Skip navigation

javascript open() function returns undefined

1132 Views 5 Replies Latest reply: Jan 2, 2013 7:28 AM by etresoft RSS
Beaver13 Calculating status...
Currently Being Moderated
Jan 1, 2013 7:38 AM

The javascript function open() specs like "fullscreen", "width", "height", seem not to work under Safari while they do under Firefox, Opera and even Explorer. So, I open a popup with : Win=open("<url>","","") and then , I use Win.resizeTo(<width>,<height>) where <width> and <height> was evaluated previously . But I obtain the message : "TypeError : 'undefined' is not an object (evaluating Win.resizeTo)".

 

I found several problems with Safari (performance different from other browsers), and up to now, I managed to get round the problem. But in this case, I go blank !!!

Please, can you help me to produce a code visible by Safarists ;o)

 



Safari, Mac OS X (10.6.8)
  • etresoft Level 7 Level 7 (23,915 points)
    Currently Being Moderated
    Jan 1, 2013 10:30 AM (in response to Beaver13)

    That is because open() isn't a function. It is a method of the window object. I suggest you start with Safari as it is the most standard compliant browser and has the best debugging features. Then hack up the site for other browsers as necessary. Don't waste your time with Opera.

  • Grindel1 Level 1 Level 1 (0 points)
    Currently Being Moderated
    Jan 2, 2013 3:41 AM (in response to Beaver13)

    Don't listen to him he's just drinking the koolaid. there are several instances in which safari fails to conform like other more complient browsers. As for your dialog problem. are you testing on an iOS device or on OSX? That's where I would start my hunt for a solution. But as for an answer I don't have one right off the top of my head.

  • etresoft Level 7 Level 7 (23,915 points)
    Currently Being Moderated
    Jan 2, 2013 7:21 AM (in response to Beaver13)

     

    Beaver13 wrote:

     

    Thank you "etresoft". In fact, I wrote the inappropriate term function, but as I detailed above, I used correctly resizeTo as a method of "what should be a window object". Syntax of the evaluation of this object by open is also correct since the root object window is implicit. Anyway, I tried adding window or this and I obtained the same behavior.

     

    In theory that is true, but it isn't working for you. While I'm quite fond of Javascript, it is a very flexible language and you could have installed any number of 3rd party additions that do all kinds of crazy things with it.

     

    Finally, could you say me how you would  open a popup with given dimensions ?

    I normally don't use pop-ups but I have one special case where a page is displayed inside of Google Earth. Google Earth isn't a real web browser, but looks like one, so it needs lots of hacks to get some functionality. When the user clicks an image link, it uses this function to pop-up a new window that redirects itself to the appropriate image URL, successfully downloading the requested image instead of the nasty error message the user would have seen otherwise - and no download. I will add a few extra comments to explain what is going on...

     

    // Pass in the id of the item to download.

    function embeddedDownloadItem(id)

    {

         // Center the pop-up in a platform-neutral way.

        var top =

            window.screenTop

                ? window.screenTop

                : window.screenY;

     

        var left =

            window.screenLeft

                ? window.screenLeft

                : window.screenX;

     

        top += $(window).height();

        left += $(window).width();

     

        // Move it over a bit.

        left -= 200;

     

        // Use the id to construct a selector to

        // find and extract the URL.

        var url = $('#url-' + id).attr('value');

     

        // Download the file via new window.

        downloadWindow =

            window.open(

                url,

                "Download",

                'top=' + top + ', left=' + left

                    + ',width=200,height=100');

     

        // Close the new window in 5 seconds.

        setTimeout("downloadWindow.close();", 5000);

     

        // Hide it until that happens.

        window.focus();

    }

     

    As you can see, I am using jQuery which does some of that crazy stuff I mentioned earlier. However, that is not something you really want to live without. This is a special case that just pops up a window, redirects to download an image, and then goes away. I actually recommend not using pop-ups at all because they are too easy to block. In this case, it is running out of Google Earth with doesn't have a pop-up blocker, so I lucked out.

     

    I don't know why your code isn't working. Have you tried the demos at w3schools? They are always very handy.

     

    I agree with you, Safari has the best debugging features, but, I'm a little more circumspect about "the most standard compliant", but maybe I'm wrong.

     

    That is just what I have found. I am not really a web developer, but I have been roped into it. Because I don't really enjoy it, I don't have the same obsession towards perfection that I would elsewhere. If I can get it working in the major browsers, that's good enough for me.

     

    I always build in Safari first. The latest Safari has a few more debugging bells and whistles but is actually a bit harder to use in this aspect than the previous version. I build a "clean-room" version of the site in Safari with no hacks of any kind. Everything works as it should in an "ideal" browser, which just happens to be Safari. The console window and "window.console.log()" are your friends. "Inspect element" is very powerful.

     

    I don't bother with Chrome because it is so similar to Safari. I have never seen a significant difference between the two.

     

    Next up is IE7. Parallels to the rescue. Thankfully, I don't have to support IE6 anymore. IE has some very nice, version-specific hacks that allow you retain some of your sanity. I also use Zend which automatically generates these constructs. I can do something like:

     

            $this->view->headLink()->appendStylesheet(

                $this->view->baseUrl() . '/css/ie7.css', 'all', 'IE 7');

            $this->view->headLink()->appendStylesheet(

                $this->view->baseUrl() . '/css/ie8.css', 'all', 'IE 8');

     

    which will generate:

     

    <!--[if IE 7]> <link href="/css/ie7.css" media="all" rel="stylesheet" type="text/css" /><![endif]-->

    <!--[if IE 8]> <link href="/css/ie8.css" media="all" rel="stylesheet" type="text/css" /><![endif]-->

     

    Zend supports the same thing with Javascript, with a little bit more mess:

     

            $this->view->headScript()->appendFile(

                $this->view->baseUrl() . '/js_include/warning.js',

                'text/javascript',

                array('conditional' => 'IE 6'));

            $this->view->headScript()->appendScript(

                sprintf(

                    'window.onload=function(){e("%s")}',

                    $this->view->baseUrl() . '/images'),

                'text/javascript',

                array('conditional' => 'IE 6'));

     

    generates:

     

    <!--[if IE 6]> <script type="text/javascript" src="/js_include/warning.js"></script><![endif]-->

    <!--[if IE 6]> <script type="text/javascript">

        //<![CDATA[

    window.onload=function(){e("/images")}    //]]>

    </script><![endif]-->

     

    In this example, I just pop-up a warning saying IE6 isn't supported at all.

     

    You can do most of the IE7 and IE8 support with the above CSS hacks. If you need to change the structure to support IE, then once it works in IE you have to go back and re-test in Safari.

     

    I have found that IE9 is much more standards-compliant and needs very little help.

     

    Firefox is actually one of the flakier browsers these days - even more so than IE9. I actually have to add a special section of Firefox hacks at the end of my CSS like this:

     

    /* Firefox hacks */

    @-moz-document url-prefix()

    {

        #kml_loading,

        #kmz_loading,

        #shapefile_loading

        {

            top: -1px;

        }

    ...

    }

    Unfortunately, Firefox wasn't known to be a troublemaker like IE so the hacks are more ugly than in IE.

  • etresoft Level 7 Level 7 (23,915 points)
    Currently Being Moderated
    Jan 2, 2013 7:28 AM (in response to Grindel1)

    Grindel1 wrote:

     

    Don't listen to him he's just drinking the koolaid. 

    Obviously you are just pretending to be a troll to get me to provide a better answer.

     

    While I appreciate the sentiment, I really don't like the koolaid reference. I am old enough to remember the horrible tragedy that it refers to. If you want to call me a rabid Apple fanboi, please do so. I wear that label proudly.

     

    Just don't compare Apple users with murderers of 287 children. That's just offensive.

     

    Thanks.

Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Legend

  • This solved my question - 10 points
  • This helped me - 5 points
This site contains user submitted content, comments and opinions and is for informational purposes only. Apple disclaims any and all liability for the acts, omissions and conduct of any third parties in connection with or related to your use of the site. All postings and use of the content on this site are subject to the Apple Support Communities Terms of Use.