PHP网站使用JavaScript和Iframe简单实现部分刷新效果
本文主要是记录自己寒假作业PHP网站实现加载界面的文章,运行效果如下图所示。主要记录php+html+Apache开发网站的3个功能:(方便以后阅读和其他人学习)
1.如何实现简单页面布局
2.使用jsp如何实现隐藏与显示效果
3.通过iframe实现局部动态更新页面内容
一.运行效果
运行apache访问本地页面http://localhost:8080/CourseStudy/index.php,效果如下所示:(lamp/wamp配置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>后面实现局部加载会讲述。
<!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="data: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="data: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="data: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="data: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="data: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简单实现部分刷新效果相关推荐
- 浏览器html5/css3兼容性检测的javascript类库 - Modernizr简单介绍
为什么80%的码农都做不了架构师?>>> 日期:2012-4-17 来源:GBin1.com 在线演示 本地下载 大家是不是在开发设计过程中遇到如下情况?某些浏览器不支持H ...
- wordpress网站防止被别人iframe框架调用的九种方法
今天发现自己的网站被一个使用iframe框架作为搜索引擎的网站调用,自己的域名被加密get附在它的网址后面,网上很多都是js屏蔽,今天找到了最全最完美的解决方案,你如果也遇到了这种情况,不妨参考一下. ...
- 禁止网站被别人通过 iframe 引用
禁止网站被别人通过 iframe 引用 前端处理 方案一:js方法 不可靠,不推荐使用 <script type="text/javascript">if(self ! ...
- javascript 代码_如何使您JavaScript代码保持简单并提高其可读性
javascript 代码 by Leonardo Lima 莱昂纳多·利马(Leonardo Lima) 如何使您JavaScript代码保持简单并提高其可读性 (How to keep your ...
- javascript worker 多线程 简单示例
javascript worker 多线程 简单示例 项目结构 主线程 index.html <!DOCTYPE html> <html lang="en"> ...
- JavaScript 日期格式化 简单有用
JavaScript 日期格式化 简单有用 代码例如以下,引入jquery后直接后增加下面代码刷新可測试 Date.prototype.Format = function (fmt) { //auth ...
- JavaScript入门(part4)--简单数据类型
学习笔记,仅供参考,有错必纠 参考自:pink老师教案 文章目录 JavaScript入门 简单数据类型 数字型number 数字型范围 数字型三个特殊值 函数isNaN 字符串型string 布尔型 ...
- c语言字符笛卡尔积,JavaScript笛卡尔积超简单实现算法示例
本文实例讲述了JavaScript笛卡尔积超简单实现算法.分享给大家供大家参考,具体如下: JS笛卡尔积算法 function cartesianProductOf() { return Array. ...
- 报告显示37%网站存在JavaScript库漏洞
近日,美国高校安全研究团队发布了一份关于网络上使用JavaScript程序库的分析报告,报告中指出在所调查的13.3万个网站中,有37%的网站存在使用含有漏洞的JavaScript程序库的情况,而且至 ...
最新文章
- java控制台两个字符串_java控制台输入字符串
- JavaScript中几个重要的知识点(1) ---- 面向对象
- 解决arXiv上传LaTeXpaper的坑
- Nginx中木马解决方法
- 论MySQL何时使用索引,何时不使用索引
- 第十八篇:java操作Excel要处理和分辨的几个概念
- python collections模块(数据结构常用模块)计数器Counter 双向队列deque 默认字典defaultdict 有序字典OrderedDict 可命名元组namedtuple
- android componentname activity,ComponentName的使用
- 用VIPER构建iOS应用
- 写一个 JavaScript 框架:比 setTimeout 更棒的定时执行
- 洛谷——P1092 虫食算
- 用python画出吉祥物
- Qt文档阅读笔记-QtConcurrent Map Example官方实例解析
- LeetCode 350. Intersection of Two Arrays II
- 【转载】网站从百度云转入阿里云服务器
- css 毛玻璃_CSS实现雨滴动画效果
- Android5.0免Root截屏,录屏
- Android知识梳理:点击事件分发机制
- solaris系统学习
- pcf8563c语言程序,IIC的PCF8563实用时钟程序(iccavr)