Child pages
  • Development-Examples-Open Link in New Window

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

Opening a link in a new window using JavaScript. There's actually a surprisingly easy way to do it. Just use a WOHyperlink, with an onclick binding.

Code Block
  Hyperlink3: WOHyperlink {
        action = myCustomAction;
        onclick = "return openInNewWindow(this)";
        target = "_new";
  }

Code Block
  <script language="javascript">
    function openInNewWindow(senderLink) {
        url = senderLink.href;
        newWindow = window.open(url,"NewWindow","width=650,height=600,resizable=yes,"+
                "scrollbars=yes,location=no,toolbar=no");
        newWindow.focus();
        return false;
    }
  </script>

The interesting this is, the hyperlink is sending itself to the openInNewWindow?() function, which then gets the URL from the href property of the link, and opens it in a new window. You can use a regular old action method and bind it to this hyperlink. Also, it will work in browsers that don't have javascript, because the function will not return false, and the link will act like a regular hyperlink whose target is "_new". When the javascript returns false, the link is not followed.

To do something a bit more complex, suppose you are storing image dimensions in the database, and want the newly opened window to be exactly the right size. You will need to programatically create the "onclick" binding string for the WOHyperlink, which will pass the dimensions to the openInNewWindow?() javascript function.

Code Block
  Hyperlink3: WOHyperlink {
        action = myCustomAction;
        onclick = myOnclickString;
        target = "_new";
  }

and in your component class, add the following method:

Code Block
  public String myOnclickString() {
        EOEnterpriseObject imageBeingOpened; // assume this exists
        Integer width = imageBeingOpened.width();
        Integer height = imageBeingOpened.height();
        return "return openInNewWindow(this, " + width + ", " + height + ");";
  }

And finally, change your javascript method to accept the width & height parameters:

Code Block
  <script language="javascript">

  function openInNewWindow(senderLink, width, height) {
        url = senderLink.href;
        newWindow = window.open(url,"NewWindow","width="+width+",height="+height+",resizable=yes,"+
                "scrollbars=yes,location=no,toolbar=no");
        newWindow.focus();
        return false;
  }

  </script>