不死鳥之巢: 8月 2016

2016年8月29日星期一

使用Java取得當前JSP的名稱

我需要取得JSP、當前網頁的名稱，因此搜尋了一下做法；原先以為有this之類的方式可取得，結果是使用request取得網址，再過濾出名稱。

String uri = request.getRequestURI();
String pageName = uri.substring( uri.lastIndexOf( "/" ) + 1 );

這樣就可取得網址和過濾後的網頁名稱，蠻好用的。

2016年8月25日星期四

Javascript內使用PostMessage在網頁間傳輸資料

目前我知道三種在網頁間傳輸資料的方式：jsp:include的jsp:param、iframe本身的傳值、和PostMessage，當然還有很多其他傳輸的方式。PostMessage看起來受到的限制最少，也可以在很多不同情況下運用，所以現下會使用它。

假設有兩個網頁：aaa.jsp和bbb.jsp，然後從AAA.jsp傳輸資料到BBB.jsp內。

--------------------------------------------------------------------------------------------------------

aaa.jsp的內容：

<%@ page language="java" contentType="text/html; charset=BIG5" pageEncoding="BIG5"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>AAA</title>
</head>
<script type="text/javascript">
 
    function sendMessage()
    {
        var menu = document.getElementById( "bbbID" ).contentWindow;
 
        menu.postMessage( document.getElementById( "messageID" ).value, 'http://localhost:8080' );
    }
 
</script>
<body>
    <iframe src = "bbb.jsp" id = "bbbID" frameborder = "1" scrolling = "auto"></iframe>
 
    <form>
        <input type = "text" id = "messageID" value = "">
        <input type = "button" value = "傳送訊息給bbb" onclick = "sendMessage()">
    </form>
</body>
</html>

--------------------------------------------------------------------------------------------------------

bbb.jsp的內容：

<%@ page language="java" contentType="text/html; charset=BIG5" pageEncoding="BIG5"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>Insert title here</title>
</head>
<script type="text/javascript">
 
    function getMessage( event )
    {
        if( event.origin != 'http://localhost:8080' )
        {
            alert( event.origin );
 
            return;
        }
 
        document.getElementById( "receiveID" ).innerHTML = event.data;
    }
 
    if( typeof window.addEventListener != 'undefined' )
    {
        window.addEventListener( 'message', getMessage, false );
    }
    else if( typeof window.attachEvent != 'undefined' )
    {
        window.attachEvent( 'onmessage', getMessage );
    }
 
</script>
<body>
    <h1>這是bbb！</h1>
    <div id = "receiveID">等待接收訊息！</div>
</body>
</html>

--------------------------------------------------------------------------------------------------------

aaa.jsp內的postMessage有兩個參數，前面是要夾帶的資料，後面是傳送的網域；然後在bbb.jsp內可以用event.origin來判斷網域是否相符，是個保險機制。如果不需要這層保險機制，可以將後面的參數設為'*'，這樣接收端也可以不用進行檢查。

例如在aaa.jsp內將

menu.postMessage( document.getElementById( "messageID" ).value, 'http://localhost:8080' );

改為

menu.postMessage( document.getElementById( "messageID" ).value, '*' );

然後在bbb.jsp內將

function getMessage( event )
{
    if( event.origin != 'http://localhost:8080' )
    {
        alert( event.origin );
 
        return;
    }
 
    document.getElementById( "receiveID" ).innerHTML = event.data;
}

改為

function getMessage( event )
{
    document.getElementById( "receiveID" ).innerHTML = event.data;
}

--------------------------------------------------------------------------------------------------------

而之所以會同時使用addEventListener和attachEvent，是因為以前各大瀏覽器不一定會支援addEventListener，現在如何我是不知道啦......因此先檢查addEventListener能不能用，不行再用attachEvent。

網路上可找到許多關於addEventListener和attachEvent的詳細解釋，不需要我這個外行人做粗淺的說明了。

2016年8月2日星期二

在Java和JavaScript內的HashMap用法

HashMap在寫程式時很常使用，還有一種兼具順序的LinkedHashMap存在；這邊要講的是在Java和JavaScript內要使用時，兩者不一樣的地方。

在Java內：

HashMap<String, String> testHashMap = new HashMap<>();
 
testHashMap.put( "1", "Kim" );
testHashMap.put( "2", "Dick" );
 
for( String key : testHashMap.keySet() )
{
    System.out.println( key + " = " + testHashMap.get( key ) );
}

--------------------------------------------------------------------------------------------------------
在JavaScript內：

var testHashMap= {};
 
testHashMap['1'] = 'Kim';
testHashMap['2'] = 'Dick';
 
for( var key in testHashMap )
{
    alert( key + ' = ' + testHashMap[key] );
}

2016年8月1日星期一

在HTML內，不受CSS影響的Style設定方式

這個我還沒弄懂，是因為工作上碰到，然後同事提供了解法；所以先記錄在此，日後再研究。主要是把<select>的顯示和尺寸可以獨立在CSS之外：

<style>
 
    #selectForm
    {
        width:200px !important;
        height:auto !important;
    }
 
</style>
 
<select id = "selectForm" size = "4" multiple="multiple">
    <option>1......</option>
    <option>2......</option>
    <option>3......</option>
    <option>4......</option>
</select>

HTML內下拉式選單的大小、單選和複選

在HTML內，常用<select>來製作下拉式選單，而這邊對於選單的顯示尺寸、單選和複選設定來說明。

顯示尺寸的部分，並不是要講Width和Height，而是設定可以一次性地顯示幾個選項：

<select size = "3">
    <option value = "1">第1個</option>
    <option value = "2">第2個</option>
    <option value = "3">第3個</option>
    <option value = "4">第4個</option>
    <option value = "5">第5個</option>
</select>

size可以設定一次出現幾個選項在畫面上。
--------------------------------------------------------------------------------------------------------
然後是一般的單選，在HTML的部分：

<select name = "list" size = "3">
    <option value = "1">第1個</option>
    <option value = "2">第2個</option>
    <option value = "3">第3個</option>
    <option value = "4">第4個</option>
    <option value = "5">第5個</option>
</select>

在JAVA的部分：

String listValue = request.getParameter( "list" );

--------------------------------------------------------------------------------------------------------
最後是複選，在HTML的部分：

<select name = "list" size = "3" multiple="multiple">
    <option value = "1">第1個</option>
    <option value = "2">第2個</option>
    <option value = "3">第3個</option>
    <option value = "4">第4個</option>
    <option value = "5">第5個</option>
</select>

在JAVA的部分：

String[] listValueList = request.getParameterValues( "list" );

2016年8月29日 星期一

使用Java取得當前JSP的名稱

2016年8月25日 星期四

Javascript內使用PostMessage在網頁間傳輸資料

2016年8月2日 星期二

在Java和JavaScript內的HashMap用法

2016年8月1日 星期一

在HTML內，不受CSS影響的Style設定方式

HTML內下拉式選單的大小、單選和複選

2016年8月29日星期一

2016年8月25日星期四

2016年8月2日星期二

2016年8月1日星期一