Javascript window.open

最近專案當中遇到了一個javascript瀏覽器的相容問題
使用window.open開啟新的視窗。以下是程式碼：
 
function openMenuUrl(url, windowId){
  if(windowId){
    windowId  = windowId + cs2_generateTempId(windowId);
    var scalar = 0.9;
    var w_ht = Math.round(scalar * screen_ht);
    var w_wd = Math.round(scalar * screen_wd);
    var w_left = Math.round((screen_wd-w_wd)*0.5);
    var w_top = Math.round((screen_ht-w_ht)*0.5);
    windowparms = "resizable=yes,status=yes,scrollbars=yes,";
    windowparms += "left=" + w_left + ",top=" + w_top + ",screenX=" + w_left + ",screenY=" + w_top + ",";
    windowparms += "height=" + w_ht + ",width=" + w_wd + ",toolbar=no";

    if (isStandardZoneFunction(url)){
      window.open("../transition.htm", windowId, windowparms);
  } else if(url.indexOf("cs1MocToMcc=true") == -1){
      window.open("../progress.htm", windowId, windowparms);
  }

  if((myNewWin = window.open(url, windowId, windowparms)) == null ) {
    var_proceed=true;
    return;
  }
  myNewWin.focus();
  var_proceed=true;
  } else{
    window.location.href = url;
  }
}

期望行為是能在新視窗當中先看到transition.htm的內容，然後再跳轉到傳入的url。
但是FF/Chrome中，不能看到transition.htm的內容。
原因：

https://developer.mozilla.org/en-US/docs/DOM/window.open

The open() method creates a new secondary browser window, similar to choosing New Window from the File menu. The strUrl parameter specifies the URL to be fetched and loaded in the new window. If strUrl is an empty string, then a new blank, empty window (URL about:blank) is created with the default toolbars of the main window.

Note that remote URLs won't load immediately. When window.open() returns, the window always contains about:blank. The actual fetching of the URL is deferred and starts after the current script. block finishes executing. The window creation and the loading of the referenced resource are done asynchronously.

解決方法：

function openMenuUrl(url, windowId){
  if(windowId){
    windowId  = windowId + cs2_generateTempId(windowId);
    var scalar = 0.9;
    var w_ht = Math.round(scalar * screen_ht);
    var w_wd = Math.round(scalar * screen_wd);
    var w_left = Math.round((screen_wd-w_wd)*0.5);
    var w_top = Math.round((screen_ht-w_ht)*0.5);
    windowparms = "resizable=yes,status=yes,scrollbars=yes,";
    windowparms += "left=" + w_left + ",top=" + w_top + ",screenX=" + w_left + ",screenY=" + w_top + ",";
    windowparms += "height=" + w_ht + ",width=" + w_wd + ",toolbar=no";

    if (isStandardZoneFunction(url)){
      window.open("../transition.htm", windowId, windowparms);
  } else if(url.indexOf("cs1MocToMcc=true") == -1){
      window.open("../progress.htm", windowId, windowparms);
  }
  setTimeout(function() {
      if((myNewWin=window.open(url,windowId,windowparms))==null) {
       return;
      }
      myNewWin.focus();
    }, 1000);
  var_proceed=true;
  } else{
    window.location.href = url;
  }
}

此處用到了setTimeout與閉包。

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/8520577/viewspace-754948/，如需轉載，請註明出處，否則將追究法律責任。