無聊的一鍵開啟四個剛剛好的瀏覽器新視窗

動機:

看到 Ricky 大在 PHP conf 表演 socket 的東西時,用了一個按下去會同時開啟四個新視窗並且剛好在銀幕的四個區塊,覺得還蠻有趣的,於是乎想來試試之~。

目標:

一鍵開啟四個將畫面等分的視窗。

步驟:

先找看看有哪些可用的屬性 ( 找到這個 ):

-> 已經可以控制新視窗的大小( width, height)和位置( left, top )了

我們還需要知道如何找出銀幕的寬和高:

-> screen.height , screen.width

該有的都有了,可以動手了!

程式碼:

<!doctype html>
<html lang="zh-tw">
<head>
  <meta charset="UTF-8">
  <title>一次開四個</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
  <a href="#">開四個新視窗</a>
 
<script>
$(function () {
  openByCustomConfig = function (oConfig) {
    var 
      _url = oConfig.url,
      _windowName = oConfig.windowName,
      _left = oConfig.left,
      _top = oConfig.top,
      _config = 'toolbar=no,location=no,status=no, menubar=no';
 
    _config+= ',width=' + screen.width * 0.49;
    _config+= ',height=' + screen.height * 0.42;
    _config+= ',left=' + _left;
    _config+= ',top=' + _top;
    return window.open( _url, _windowName, _config);
  };
 
  $('a').click(function () {
    var 
      _leftDis = screen.width * 0.50,
      _topDis = screen.height * 0.50,
      oConfig = {url: 'http://tw.yahoo.com'};
 
    oOptLT = $.extend( {}, oConfig, {windowName: 'Yahoo1', left: 0, top: 0});
    oOptRT = $.extend( {}, oConfig,  {windowName: 'Yahoo2', left: _leftDis, top: 0});
    oOptLB = $.extend( {}, oConfig, {windowName: 'Yahoo3', left: 0, top: _topDis});
    oOptRB = $.extend( {}, oConfig, {windowName: 'Yahoo4', left: _leftDis, top: _topDis});
 
    openByCustomConfig( oOptLT );
    openByCustomConfig( oOptRT );
    openByCustomConfig( oOptLB );
    openByCustomConfig( oOptRB );
  });
});
 
</script>
</body>
</html>

後記:

雖然看起來有點無聊,不過要做某些測試或介紹的時候這個東西應該還微有用。

Comments

comments powered by Disqus