當(dāng)前位置：首頁(yè) > 编程语言 > php >内容正文

php

PHP网站使用JavaScript和Iframe简单实现部分刷新效果

發(fā)布時(shí)間：2024/5/28 php 55 豆豆

生活随笔收集整理的這篇文章主要介紹了 PHP网站使用JavaScript和Iframe简单实现部分刷新效果小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

? ? ? ? 本文主要是記錄自己寒假作業(yè)PHP網(wǎng)站實(shí)現(xiàn)加載界面的文章，運(yùn)行效果如下圖所示。主要記錄php+html+Apache開(kāi)發(fā)網(wǎng)站的3個(gè)功能：(方便以后閱讀和其他人學(xué)習(xí))
? ? ? ? 1.如何實(shí)現(xiàn)簡(jiǎn)單頁(yè)面布局
? ? ? ? 2.使用jsp如何實(shí)現(xiàn)隱藏與顯示效果
? ? ? ? 3.通過(guò)iframe實(shí)現(xiàn)局部動(dòng)態(tài)更新頁(yè)面內(nèi)容

一.運(yùn)行效果
? ? ? ? 運(yùn)行apache訪問(wèn)本地頁(yè)面http://localhost:8080/CourseStudy/index.php，效果如下所示：(lamp/wamp配置php網(wǎng)站)

? ? ? ? 可以發(fā)現(xiàn)該界面布局主要由3部分組成,頂部head、中間左邊菜單欄和中間右邊顯示界面，點(diǎn)擊左邊菜單欄會(huì)通過(guò)JavaScript實(shí)現(xiàn)隱藏縮放功能；同時(shí)點(diǎn)擊不同菜單欄可以在右邊顯示不同界面。如下圖所示：

二.實(shí)現(xiàn)方法介紹 1.界面布局 ? ? ? ? 界面布局主要采用的是include加載php文件實(shí)現(xiàn)，采用div和table實(shí)現(xiàn)布局，其中index.php文件代碼如下： <?php include("head.php"); ?> <br />  <div id="middle">  <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>? ? ? ? 主要是通過(guò)head.php布局該界面的頭部，main_right.php實(shí)現(xiàn)加載界面的中間右邊部分，main_left.php加載界面的中間左邊菜單欄，而<iframe>后面實(shí)現(xiàn)局部加載會(huì)講述。

? ? ? ? 其中head.php代碼如下圖所示，就是Html+CSS簡(jiǎn)單的布局：
<!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>《分布式系統(tǒng)》精品課程學(xué)習(xí)</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>注冊(cè)</A>|<A style="COLOR: #000" href=""οnclick="if (confirm('確定要退出嗎？')) return true; else return false;" target=main>退出系統(tǒng)</A> </TD> </TABLE> <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0><TR bgColor=#1c5db6 height=4><TD></TD></TR> </TABLE>
2.JavaScript實(shí)現(xiàn)隱藏縮放功能
? ? ? ? main_left.php中采用table布局并調(diào)用該SCRIPT函數(shù)實(shí)現(xiàn)該功能，其中核心代碼如下所示：
<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> ? ? ? ?其中第一個(gè)菜單調(diào)用代碼如下，通過(guò)οnclick=expend(1)調(diào)用，而且子菜單DISPLAY初值為NONE，則調(diào)用該函數(shù)后初值為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);">課程首頁(yè)</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">首頁(yè)介紹</A></TD></TR><TR height=4><TD colSpan=2></TD></TR> </TABLE> 
3.Iframe實(shí)現(xiàn)局部加載效果
? ? ? ? 通過(guò)iframe創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架(即行內(nèi)框架)并實(shí)現(xiàn)局部加載功能，也就是點(diǎn)擊左邊不同的菜單右邊顯示不同的內(nèi)容而整個(gè)界面布局并沒(méi)有發(fā)生改變。
? ? ? ? 在index.php布局中首先采用<iframe></frame>布局，同時(shí)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=""中加入要嵌入的頁(yè)面，name=""要嵌入頁(yè)面中traget。
? ? ? ? 然后在子菜單中添加：
? ? ? ? <A href="main_right_yk2-2.php"?target="rightFrame">教師團(tuán)隊(duì)</A>
? ? ? ? href中添加要加載的php界面，target中添加框架中的name。
? ? ? ? 其中第二欄“課程概括”代碼如下：(可參考：百度文庫(kù))
<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">課程簡(jiǎn)介</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">教師團(tuán)隊(duì)</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">教學(xué)條件</A></TD></TR><TR height=4><TD colSpan=2></TD></TR> </TABLE>? ? ? ? 最后講講接下來(lái)需要解決的問(wèn)題：
? ? ? ? 1.iframe布局后，刷新總是重新加載index.php界面，而當(dāng)前顯示的內(nèi)容會(huì)消失；
? ? ? ? 2.php如何通過(guò)Post+Session進(jìn)行登陸及表單訪問(wèn)MySQL數(shù)據(jù)庫(kù)；
? ? ? ? 3.如何實(shí)現(xiàn)網(wǎng)頁(yè)index.php顯示不同內(nèi)容時(shí)index.php/xxxx加載些內(nèi)容.
? ? ? ? 希望文章對(duì)你有所幫助，后天就要過(guò)年了！提前祝自己和大家新年快了。
? ? ? ? 下面地址是該部分界面代碼：http://pan.baidu.com/s/1740Cu
? ? ? ? (BY:Eastmount 2015-2-16 清晨6點(diǎn) ?http://blog.csdn.net/eastmount/)

總結(jié)

以上是生活随笔為你收集整理的PHP网站使用JavaScript和Iframe简单实现部分刷新效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：【学习排序】 Learning to R
下一篇： PHP+HTML实现登出界面倒计时效果