SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2007
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    open new window problem

    I'd like to have a user click a link on an HTML page and have it open a small window (350x500) with a form on it and have a submit button on that form that will also close that window and redirect to another page that is in the same browser window as the first link. This can't be defeated by pop-up blocking (it's not an ad anyway, but just the way my client wants it). Can anyone help me with that?

    thanks and much appreciated,
    R

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Opening the window is achieved with window.open('form.html')

    To close the form after submitting you can place an onsubmit event onto the form to run a certain function. That function will create a setTimeout() event for a couple of seconds (2000 milliseconds) so that the form has time to submit.

    That setTimeout event will then run a function that closes the window with window.close()

    Try that out for yourself and if you have any issues, come back with your code.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Feb 2007
    Posts
    127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul. I'm not a very experienced js coder, though i know some action script. Should I put the "window.open" in the <a href=""... html code or have it call a function in the header (?) or make that happen in an onload in the new window.

    Thanks,

    R

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,717
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rickarooni View Post
    Thanks, Paul. I'm not a very experienced js coder, though i know some action script. Should I put the "window.open" in the <a href=""... html code
    That is not advised as you would then be mixing content with behaviour. The content, presentation and behaviour should be kept separate. You would agree that mixing css styles in with the content is a bad idea, it's the same with javascript behaviour. Keep them separate.

    Quote Originally Posted by rickarooni View Post
    or have it call a function in the header (?)
    That's another possible solution, but it's still mixing javascript in with the content. There's also another issue that scripts in the head degrade the loading performance of the page.

    Quote Originally Posted by rickarooni View Post
    or make that happen in an onload in the new window.
    That can work too, but then the script has to wait until every last thing on the page has finished loading, including images and other content. This can take quite a while especially for people on dial-up connections.

    The solution that is advised to resolve these issues is to place the code at the bottom of the body.
    http://javascript.crockford.com/code.html
    http://developer.yahoo.com/performance/rules.html

    If it's only for one particular link, you can use a unique identifier to affect it. If it's multiple links then you should use a class name and search the links for that class name.

    I'll use the first scenario here, where you should do something like his:

    Code html4strict:
    <body>
    ...
    <a id="formWindow" href="somewhere.html">Do the form thing</a>
    ...
    <script>
    document.getElementById('formWindow').onclick = function () {
        window.open(this.href);
        return false;
    };
    </script>
    </body>

    You may notice that the script tag has no attributes. The type="text/javscript" attribute has been deprecated in favour of type="application/javascript" but IE6 doesn't understand that and ignores all such scripts. Because the script tag defaults to javascript, it's best to remove the attribute all together.

    The link has the path to the form, so that the form will still work when javascript is disabled or not available.
    When scripting is available the window can open and the script returns a value of false back to the link, to prevent it from performing its default action, that of following the link.

    If you were looking through code for a particular class value, you can use a regular expression to find it, and ensure that it's the correct one by checking for word boundaries.

    Code javascript:
    // for each anchor
    var anchors = document.getElementByTagName('a');
    for (var i = 0; i < anchors.length; i++) {
    	// find ones with newWindow as their class name
        if (anchors[i].className.match(/\bnewWindow\b/)) {
    		// and attach an event
    		anchors[i].onclick = function () {
    		    window.open(this.href);
    			return false;
    		};
    	}
    }
    Last edited by paul_wilkins; Feb 18, 2008 at 17:22.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •