Skip to Content
Last modified by Pascal Robert on 2010/09/13 00:32
From version 2.1
edited by smmccraw
on 2007/07/08 09:45
Change comment: There is no comment for this version
To version 5.1
edited by Pascal Robert
on 2010/09/13 00:32
Change comment: There is no comment for this version

Summary

Details

Page properties
Title
... ... @@ -1,1 +1,1 @@
1 -Programming__WebObjects-Web Applications-Development-Examples-Open Link in New Window
1 +Development-Examples-Open Link in New Window
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.smmccraw
1 +XWiki.probert
Content
... ... @@ -1,7 +1,6 @@
1 1  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.
2 2  
3 -{{panel}}
4 -
3 +{{code}}
5 5   Hyperlink3: WOHyperlink {
6 6   action = myCustomAction;
7 7   onclick = "return openInNewWindow(this)";
... ... @@ -8,28 +8,27 @@
8 8   target = "_new";
9 9   }
10 10  
11 -{{/panel}}
10 +{{/code}}
12 12  
13 - <script language="javascript">
12 +{{code}}
14 14  
15 -{{panel}}
16 -
17 - function openInNewWindow(senderLink) {
14 + <script language="javascript">
15 + function openInNewWindow(senderLink) {
18 18   url = senderLink.href;
19 19   newWindow = window.open(url,"NewWindow","width=650,height=600,resizable=yes,"+
20 20   "scrollbars=yes,location=no,toolbar=no");
21 21   newWindow.focus();
22 22   return false;
23 - }
21 + }
24 24   </script>
25 25  
26 -{{/panel}}
24 +{{/code}}
27 27  
28 -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.//
26 +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.
29 29  
30 30  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.
31 31  
32 -{{panel}}
30 +{{code}}
33 33  
34 34   Hyperlink3: WOHyperlink {
35 35   action = myCustomAction;
... ... @@ -37,11 +37,11 @@
37 37   target = "_new";
38 38   }
39 39  
40 -{{/panel}}
38 +{{/code}}
41 41  
42 42  and in your component class, add the following method:
43 43  
44 -{{panel}}
42 +{{code}}
45 45  
46 46   public String myOnclickString() {
47 47   EOEnterpriseObject imageBeingOpened; // assume this exists
... ... @@ -50,13 +50,14 @@
50 50   return "return openInNewWindow(this, " + width + ", " + height + ");";
51 51   }
52 52  
53 -{{/panel}}
51 +{{/code}}
54 54  
55 55  And finally, change your javascript method to accept the width & height parameters:
56 56  
57 -{{panel}}
55 +{{code}}
58 58  
59 59   <script language="javascript">
58 +
60 60   function openInNewWindow(senderLink, width, height) {
61 61   url = senderLink.href;
62 62   newWindow = window.open(url,"NewWindow","width="+width+",height="+height+",resizable=yes,"+
... ... @@ -64,8 +64,8 @@
64 64   newWindow.focus();
65 65   return false;
66 66   }
67 - </script>
68 68  
69 -{{/panel}}
67 + </script> 
70 70  
71 -Category:WebObjects
69 +
70 +{{/code}}