close

iframe是一種把外部網頁嵌入自己網頁的一種語法

基本的使用方法 :

<iframe src="http://tw.yahoo.com"></iframe>

其他的參數設定 :

1. align : 相關參數值TOP(上)、BOTTOM(下)、LEFT(左)、RIGHT(右)、MIDDLE(中)

    ex : <iframe src="http://tw.yahoo.com" align="top"></iframe>

2. frameborder : 邊框是否顯示 0 : 不顯示 1 : 顯示

    ex : <iframe src="http://tw.yahoo.com" frameborder="0"></iframe>

3. height : 框架高度,可以使用百分比或像素值。

4. width : 框架寬度,可以使用百分比或像素值。

    ex : <iframe src="http://tw.yahoo.com" frameborder="0" width="100%" height="50"></iframe>

5. marginwidth : 內部網頁內容右邊預留的寬度(單位都是PIX)。

6. marginheight : 內部網頁內容頂部預留的寬度(單位都是PIX)。

7. scrolling : 是否呈現捲軸,auto : 自動、yes : 呈現、no : 不呈現。

8. allowtransparency : 是否允許透明。

9. src : 預呈現的網址。

 

 

目前我自己使用的過的需求與方式 :

1. 當我們想要有一個方式是網址固定不更動,改變的只會是裡面的內容時,

    這就是一個方法,就在Apache建立一個網頁html,

    再崁入iframe的設定導入自己需要呈現的網頁即可。

2. 當我們要檢查資料是否正確時可以使用的方式,

    且不想使用到DWR的動態取得資料時可以使用隱藏的方式,

    當要檢查時就帶入需要的參數就可以執行確認資料是否正確。

3. 獨立上傳檔案的狀況,當我們需要獨立去做一個檔案上傳時,

    且不將其他資料一起送入後台,且需要即時的去查看上傳的檔案是否正確,

    使用iframe就可以是一個方法。

ex :

<iframe id="checkOrder" name="checkOrder" frameborder="0"></frame>

<script>

function checkOrder(){

    .................

    document.getElementById("checkOrder").src="http://tw.yahoo.com";

}

</script>

以上是改變src的URL,就可以符合我們需要的進入底層再做確認是否有重複或是相同的資料,

這樣的架構是使用在不想使用DWR的狀況之下。

 

ex2 :

上傳檔案的方式 : 程式為jsp、使用架構為struts2

 

uploadPage.jsp

........

<s:form name="mainForm" id="mainForm" method="post" theme="simple" enctype ="multipart/form-data">

     <s:file name="uploadPic" size="30" id="uploadPic" cssClass="{required:true}" onkeypress="return false;" onpaste="return false;"/>
     <input type="button" name="button" value="上傳" onclick="doSubmit();">

</s:form>

<script>

      此段程式就是為了將上傳後的相對路徑傳到更新頁面

      執行此段是因為要新增或更新時需要將上傳檔案的相對路徑存入資料庫,

      因此也需要有這一段程式去將路徑送入母視窗內。

      parent.document.getElementById('filePath').value='/xxxxxxxx/xxxx/xx.jpg';

 

</script>

 

updatePage.jsp

透過struts將iframe連接到uploadPage.jsp即可

 

<s:hidden id="filePath" name="filePath"/>

<iframe src="uploadDataAction.initUpload.action?parentReturnPathId=newFileNameClientB" frameborder="no" width="100%" height="80"></iframe>

 

 

這就是我使用iframe且用在upload的部份。

arrow
arrow
    全站熱搜

    werwolf 發表在 痞客邦 留言(1) 人氣()