Javascript Popup Window Tips for Salesforce

Check if a Popup Blocker Prevented the Popup Window

Most browsers will block popup windows the first time a popup window tries to appear. Here is how to check if a popup window was blocked.

Modal Window
Making a popup window modal helps prevent it from being lost behind the main browser window. The following technique makes the popup window display above the window that created it. However, it doesn’t force the window to stay on top when other tabs or applications have focus.
Refresh or Change the Original Page’s Location
A popup window may be used to alter information related to what is displayed on the page that initiated the window. This may require the original page to be refreshed or redirected. Assign the URL to the window.opener.location.href property to change opener’s page.
// change the location of the page that opened the popup
window.opener.location.href = "/apex/NewVfPage";

// refresh the page that opened the popup with the reload method 
window.reload(true);  // true=get page from the server, false=get page from cache

// Or, setting the location to itself
window.opener.location.href = window.opener.location.href;

Custom Button to Refresh the Original Page
Custom Buttons that use Javascript can do a lot. However, security in modern browsers can make it tricky to refresh or change the URL of the originating page. One way to do this is to have the originating page monitor the popup window that was created. The page can then refresh itself when the popup window no longer exists in memory.
Custom button code:
var win = window.open("/apex/PopupWindowVfPage", "MyWinName", "height=500,width=500"); 

// check if the window exists every second
// refresh the window using the window's same location
var timer = setInterval(function() {
  if(win.closed) { 
    clearInterval(timer); 
    window.location.href = window.location.href; 
  } 
}, 1000);

Change the Window Size
Changing the window height to adapt to content within the page can be frustrating because of variations in different browsers. Below is an example of one way to do it. I would not call it pretty, but it works well enough. First, it sets an initial size for the page. This is to specify the width, and the content will flow down the page based on the width. Second, we set the page size again because we can now tell the height based on the new width. Please comment if you’ve found a better light weight way to do this.
Javascript in the Popup Window:
// attach the ChangeWindowSize call to the page's onload event
if (window.addEventListener) {
  window.addEventListener('load', ChangeWindowSize, false);
} else if (window.attachEvent) {
  window.attachEvent('onload', ChangeWindowSize);
}
    
function ChangeWindowSize() {
  // first adjust to set the width
  AdjustWindow();
  // resize a second time after width is set from the first resizing, 10th of a second later
  setTimeout(function(){ AdjustWindow(); }, 100);
}
function AdjustWindow() {
  var body = document.body;
  var height = Math.max(body.offsetHeight);
  // setting the width to 1200px and the height with a 95px buffer
  window.resizeTo(1200, height + 95);
}

Close Popup after a Successful Action
A popup window may ask for user input and automatically close when processing has completed successfully. The controller can set a Javascript Boolean variable on success, and the portion of the form that is rerendered can have a script assign a true/false value. Then a method that evaluates if the window should be closed can check the value of that variable.




  


References
Mozilla - Window open

Mozilla - setInterval

Bob Buzzard - VisualForce Lookup


	
Related