PHP网站使用JavaScript和Iframe简单实现部分刷新效果
生活随笔
收集整理的這篇文章主要介紹了
PHP网站使用JavaScript和Iframe简单实现部分刷新效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? ? ? ? 本文主要是記錄自己寒假作業PHP網站實現加載界面的文章，運行效果如下圖所示。主要記錄php+html+Apache開發網站的3個功能：(方便以后閱讀和其他人學習)
? ? ? ? 1.如何實現簡單頁面布局
? ? ? ? 2.使用jsp如何實現隱藏與顯示效果
? ? ? ? 3.通過iframe實現局部動態更新頁面內容
一.運行效果
? ? ? ? 運行apache訪問本地頁面http://localhost:8080/CourseStudy/index.php，效果如下所示：(lamp/wamp配置php網站)
? ? ? ? 可以發現該界面布局主要由3部分組成,頂部head、中間左邊菜單欄和中間右邊顯示界面，點擊左邊菜單欄會通過JavaScript實現隱藏縮放功能；同時點擊不同菜單欄可以在右邊顯示不同界面。如下圖所示：
二.實現方法介紹 1.界面布局 ? ? ? ? 界面布局主要采用的是include加載php文件實現，采用div和table實現布局，其中index.php文件代碼如下： <?php include("head.php"); ?> <br /> <!-- 布局中部 --> <div id="middle"> <!-- 布局中部右邊 否則總是顯示在左邊之下 why? --> <div id="index_right"> <iframe height="100%" width="100%" border="0" frameborder="0" src="main_right.php" name="rightFrame" id="rightFrame" title="rightFrame"> </iframe> </div> <!-- 布局中部左邊 --> <div id="index_left"> <?phpinclude('main_left.php'); ?> </div> </div>? ? ? ? 主要是通過head.php布局該界面的頭部，main_right.php實現加載界面的中間右邊部分，main_left.php加載界面的中間左邊菜單欄，而<iframe>后面實現局部加載會講述。
? ? ? ? 其中head.php代碼如下圖所示，就是Html+CSS簡單的布局：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>《分布式系統》精品課程學習</title> <link href="css/mycss.css" type="text/css" rel="stylesheet"/> </head> <body> <div id="main"> <TABLE cellSpacing=0 cellPadding=0 width="100%" background="images/header_bg.gif" border=0><!--頭部圖片--><TR height=80><TD width=260><IMG height=80 src="images/logo.gif" width=260></TD><TD style="FONT-SIZE: 12px; FONT-WEIGHT: bold; COLOR: #000;PADDING-TOP: 20px; PADDING-RIGHT: 20px" align=right>您還未登錄!?|<A style="COLOR: #000" href="" target=main>登錄</A>|<A style="COLOR: #000" href="" target=main>注冊</A>|<A style="COLOR: #000" href=""οnclick="if (confirm('確定要退出嗎？')) return true; else return false;" target=main>退出系統</A> </TD> </TABLE> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0><TR bgColor=#1c5db6 height=4><TD></TD></TR> </TABLE>
2.JavaScript實現隱藏縮放功能
? ? ? ? main_left.php中采用table布局并調用該SCRIPT函數實現該功能，其中核心代碼如下所示：
<SCRIPT language=javascript>function expand(el){childObj = document.getElementById("child" + el);if (childObj.style.display == 'none'){childObj.style.display = 'block';}else{childObj.style.display = 'none';}return;} </SCRIPT> ? ? ? ?其中第一個菜單調用代碼如下，通過οnclick=expend(1)調用，而且子菜單DISPLAY初值為NONE，則調用該函數后初值為block顯示。
<!-- 第一選項 --> <TABLE cellSpacing=0 cellPadding=0 width=150 border=0> <TR height=30><TD style="PADDING-LEFT: 20px; FONT-SIZE: 15px" background=images/menu_bt.jpg><A class=menuParent οnclick=expand(1) href="javascript:void(0);">課程首頁</A></TD></TR><TR height=4><TD></TD></TR> </TABLE> <TABLE id=child1 style="DISPLAY: none" cellSpacing=0 cellPadding=0 width=150 border=0><TR height=20><TD align=middle width=30><IMG height=9 src="images/menu_icon.gif" width=9></TD><TD><A href="main_right_yk1.php" target="rightFrame">首頁介紹</A></TD></TR><TR height=4><TD colSpan=2></TD></TR> </TABLE> <!-- 第二選項 -->
3.Iframe實現局部加載效果
? ? ? ? 通過iframe創建包含另外一個文檔的內聯框架(即行內框架)并實現局部加載功能，也就是點擊左邊不同的菜單右邊顯示不同的內容而整個界面布局并沒有發生改變。
? ? ? ? 在index.php布局中首先采用<iframe></frame>布局，同時src中引用加載的php。代碼如下：
<!-- 布局中部右邊 --> <div id="index_right"> <iframe height="100%" width="100%" border="0" frameborder="0" src="main_right.php" name="rightFrame" id="rightFrame" title="rightFrame"> </iframe> </div>? ? ? ? 上面代碼中其中src=""中加入要嵌入的頁面，name=""要嵌入頁面中traget。
? ? ? ? 然后在子菜單中添加：
? ? ? ? <A href="main_right_yk2-2.php"?target="rightFrame">教師團隊</A>
? ? ? ? href中添加要加載的php界面，target中添加框架中的name。
? ? ? ? 其中第二欄“課程概括”代碼如下：(可參考：百度文庫)
<TABLE id=child2 style="DISPLAY: none" cellSpacing=0 cellPadding=0 width=150 border=0><TR height=20><TD align=middle width=30><IMG height=9 src="images/menu_icon.gif" width=9></TD><TD><A href="main_right_yk2-1.php" class=menuChild target="rightFrame">課程簡介</A></TD></TR><TR height=20><TD align=middle width=30><IMG height=9 src="images/menu_icon.gif" width=9></TD><TD><A href="main_right_yk2-2.php" target="rightFrame">教師團隊</A></TD></TR><TR height=20><TD align=middle width=30><IMG height=9 src="images/menu_icon.gif" width=9></TD><TD><A href="main_right_yk2-3.php" target="rightFrame">教學條件</A></TD></TR><TR height=4><TD colSpan=2></TD></TR> </TABLE>? ? ? ? 最后講講接下來需要解決的問題：
? ? ? ? 1.iframe布局后，刷新總是重新加載index.php界面，而當前顯示的內容會消失；
? ? ? ? 2.php如何通過Post+Session進行登陸及表單訪問MySQL數據庫；
? ? ? ? 3.如何實現網頁index.php顯示不同內容時index.php/xxxx加載些內容.
? ? ? ? 希望文章對你有所幫助，后天就要過年了！提前祝自己和大家新年快了。
? ? ? ? 下面地址是該部分界面代碼：http://pan.baidu.com/s/1740Cu
? ? ? ? (BY:Eastmount 2015-2-16 清晨6點 ?http://blog.csdn.net/eastmount/)
? ? ? ? 1.如何實現簡單頁面布局
? ? ? ? 2.使用jsp如何實現隱藏與顯示效果
? ? ? ? 3.通過iframe實現局部動態更新頁面內容
一.運行效果
? ? ? ? 運行apache訪問本地頁面http://localhost:8080/CourseStudy/index.php，效果如下所示：(lamp/wamp配置php網站)
? ? ? ? 可以發現該界面布局主要由3部分組成,頂部head、中間左邊菜單欄和中間右邊顯示界面，點擊左邊菜單欄會通過JavaScript實現隱藏縮放功能；同時點擊不同菜單欄可以在右邊顯示不同界面。如下圖所示：
二.實現方法介紹 1.界面布局 ? ? ? ? 界面布局主要采用的是include加載php文件實現，采用div和table實現布局，其中index.php文件代碼如下： <?php include("head.php"); ?> <br /> <!-- 布局中部 --> <div id="middle"> <!-- 布局中部右邊 否則總是顯示在左邊之下 why? --> <div id="index_right"> <iframe height="100%" width="100%" border="0" frameborder="0" src="main_right.php" name="rightFrame" id="rightFrame" title="rightFrame"> </iframe> </div> <!-- 布局中部左邊 --> <div id="index_left"> <?phpinclude('main_left.php'); ?> </div> </div>? ? ? ? 主要是通過head.php布局該界面的頭部，main_right.php實現加載界面的中間右邊部分，main_left.php加載界面的中間左邊菜單欄，而<iframe>后面實現局部加載會講述。
? ? ? ? 其中head.php代碼如下圖所示，就是Html+CSS簡單的布局：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>《分布式系統》精品課程學習</title> <link href="css/mycss.css" type="text/css" rel="stylesheet"/> </head> <body> <div id="main"> <TABLE cellSpacing=0 cellPadding=0 width="100%" background="images/header_bg.gif" border=0><!--頭部圖片--><TR height=80><TD width=260><IMG height=80 src="images/logo.gif" width=260></TD><TD style="FONT-SIZE: 12px; FONT-WEIGHT: bold; COLOR: #000;PADDING-TOP: 20px; PADDING-RIGHT: 20px" align=right>您還未登錄!?|<A style="COLOR: #000" href="" target=main>登錄</A>|<A style="COLOR: #000" href="" target=main>注冊</A>|<A style="COLOR: #000" href=""οnclick="if (confirm('確定要退出嗎？')) return true; else return false;" target=main>退出系統</A> </TD> </TABLE> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0><TR bgColor=#1c5db6 height=4><TD></TD></TR> </TABLE>
2.JavaScript實現隱藏縮放功能
? ? ? ? main_left.php中采用table布局并調用該SCRIPT函數實現該功能，其中核心代碼如下所示：
<SCRIPT language=javascript>function expand(el){childObj = document.getElementById("child" + el);if (childObj.style.display == 'none'){childObj.style.display = 'block';}else{childObj.style.display = 'none';}return;} </SCRIPT> ? ? ? ?其中第一個菜單調用代碼如下，通過οnclick=expend(1)調用，而且子菜單DISPLAY初值為NONE，則調用該函數后初值為block顯示。
<!-- 第一選項 --> <TABLE cellSpacing=0 cellPadding=0 width=150 border=0> <TR height=30><TD style="PADDING-LEFT: 20px; FONT-SIZE: 15px" background=images/menu_bt.jpg><A class=menuParent οnclick=expand(1) href="javascript:void(0);">課程首頁</A></TD></TR><TR height=4><TD></TD></TR> </TABLE> <TABLE id=child1 style="DISPLAY: none" cellSpacing=0 cellPadding=0 width=150 border=0><TR height=20><TD align=middle width=30><IMG height=9 src="images/menu_icon.gif" width=9></TD><TD><A href="main_right_yk1.php" target="rightFrame">首頁介紹</A></TD></TR><TR height=4><TD colSpan=2></TD></TR> </TABLE> <!-- 第二選項 -->
3.Iframe實現局部加載效果
? ? ? ? 通過iframe創建包含另外一個文檔的內聯框架(即行內框架)并實現局部加載功能，也就是點擊左邊不同的菜單右邊顯示不同的內容而整個界面布局并沒有發生改變。
? ? ? ? 在index.php布局中首先采用<iframe></frame>布局，同時src中引用加載的php。代碼如下：
<!-- 布局中部右邊 --> <div id="index_right"> <iframe height="100%" width="100%" border="0" frameborder="0" src="main_right.php" name="rightFrame" id="rightFrame" title="rightFrame"> </iframe> </div>? ? ? ? 上面代碼中其中src=""中加入要嵌入的頁面，name=""要嵌入頁面中traget。
? ? ? ? 然后在子菜單中添加：
? ? ? ? <A href="main_right_yk2-2.php"?target="rightFrame">教師團隊</A>
? ? ? ? href中添加要加載的php界面，target中添加框架中的name。
? ? ? ? 其中第二欄“課程概括”代碼如下：(可參考：百度文庫)
<TABLE id=child2 style="DISPLAY: none" cellSpacing=0 cellPadding=0 width=150 border=0><TR height=20><TD align=middle width=30><IMG height=9 src="images/menu_icon.gif" width=9></TD><TD><A href="main_right_yk2-1.php" class=menuChild target="rightFrame">課程簡介</A></TD></TR><TR height=20><TD align=middle width=30><IMG height=9 src="images/menu_icon.gif" width=9></TD><TD><A href="main_right_yk2-2.php" target="rightFrame">教師團隊</A></TD></TR><TR height=20><TD align=middle width=30><IMG height=9 src="images/menu_icon.gif" width=9></TD><TD><A href="main_right_yk2-3.php" target="rightFrame">教學條件</A></TD></TR><TR height=4><TD colSpan=2></TD></TR> </TABLE>? ? ? ? 最后講講接下來需要解決的問題：
? ? ? ? 1.iframe布局后，刷新總是重新加載index.php界面，而當前顯示的內容會消失；
? ? ? ? 2.php如何通過Post+Session進行登陸及表單訪問MySQL數據庫；
? ? ? ? 3.如何實現網頁index.php顯示不同內容時index.php/xxxx加載些內容.
? ? ? ? 希望文章對你有所幫助，后天就要過年了！提前祝自己和大家新年快了。
? ? ? ? 下面地址是該部分界面代碼：http://pan.baidu.com/s/1740Cu
? ? ? ? (BY:Eastmount 2015-2-16 清晨6點 ?http://blog.csdn.net/eastmount/)
總結
以上是生活随笔為你收集整理的PHP网站使用JavaScript和Iframe简单实现部分刷新效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【学习排序】 Learning to R
- 下一篇： PHP+HTML实现登出界面倒计时效果