前端页面无刷新方案一

在开发过程中，为了避免每个页面要做头部底部，就想怎么实现页面无刷新，局部实现效果更换方案

第一联想到了ajax读取页面没然后页面局部替换，在页面上准备几个div。这里就简单粗暴的分成3个部分，（直接贴代码）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>无刷新方案 一</title><link rel="stylesheet" href="http://css.baojia.com/s4/c/css/reset.css"><style type="text/css">body{width: 80%;margin: 0 auto}ul { margin: 0 auto; overflow: none}/*ul li {float: left; background: #ccc;padding: 15px 20px;}*/ul li {display: inline-table; background: #ccc;padding: 15px 20px;  }ul li:nth-of-type(1){ margin-left: 0px }/*ul li {display: inline-table; background: #ccc;padding: 15px 20px;}*/ul li a{color: #f0f0f0;}#pageHeader{background-color: green}#pageMain{width: 900px; margin: 0 auto; margin-top: 200px}#pageFooter{background-color: red}</style>
</head><body><div id="pageHeader"></div><div id="pageMain"></div><div id="pageFooter"></div>
</body>
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="../js/core.pss.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
</html>

View Code

准备一个简单的头部（“#pageHeader”）代码，直接几个跳转就可以。保留了a标签，是为了交给后端程序员可以直接用。

<ul>
<li><a href="page1.htm">页面1</a></li>
<li><a href="page2.htm">页面2</a></li>
<li><a href="page3.htm">页面3</a></li>
<li><a href="page4.htm">页面4</a></li>
<li><a href="page5.htm">页面5</a></li>
<li><a href="page6.htm">页面6</a></li>
</ul>

View Code

其实上面保留了a标签带来了更多的代码量，但是为了让我们的输出高质量，就辛苦一下自己。这时候增加的代码量是拦截页面的a标签跳转功能。几行代码就搞定，这样不影响phpcoder开发

obj.find('a[href!="#"]').bind("click", function(e) {e.preventDefault();loadUrl($.mainContent,$(e.currentTarget).attr("href"),true,true);return false;});obj.find('a[href="#"]').bind("click", function(e) {e.preventDefault();return false;});

View Code

拦截url hash并实现页面分发，主要的js

/****** @liubaing */$.defaultPage = "page1.htm";
$.subPagesDirectory = "";
$.headUrl = "public/header.htm";
$.footUrl = "public/footer.htm";
$.page404 = "error/index.htm";
$.headContent = $("#pageHeader");
$.mainContent = $("#pageMain");
$.footContent = $("#pageFooter");/** delete  A gourl **/
function removeA(cname) {if (cname == undefined || cname == "") return;var obj = (typeof cname == "object") ? cname : $("." + cname);obj.find('a[href!="#"]').bind("click", function(e) {e.preventDefault();loadUrl($.mainContent,$(e.currentTarget).attr("href"),true,true);return false;});obj.find('a[href="#"]').bind("click", function(e) {e.preventDefault();return false;});
}function loadUrl(obj,gourl,ishash,isactive) { if (!gourl || gourl == "" || gourl == null) {alert("跳转页面详细");return;} if(isactive){$(".navbar li").removeClass("active");$('.navbar li:has(a[href="' + gourl + '"])').addClass("active");}$.ajax({isLocal:true,type: "GET",url: gourl,dataType: "html",cache: !1,async: !1,beforeSend: function() {},success: function(data) {obj.html(data);if(ishash) window.location.hash = gourl;removeA(obj);return false;},error: function() {alert("页面" + $.subPagesDirectory + gourl + "还未实现！");return false;}})
}/** delete  A gourl **/
function removefA(cname) {if (cname == undefined || cname == "") return;var obj = (typeof cname == "object") ? cname : $("." + cname);obj.find('a[href!="#"]').bind("click", function(e) {e.preventDefault();loadfile($.mainContent, $(e.currentTarget).attr("href"),true,true);      return false;});obj.find('a[href="#"]').bind("click", function(e) {e.preventDefault();return false;});
}function loadfile(obj,path,ishash,isactive) { $.ajax({type: "GET",url:filepath+path,dataType: "html",cache: !1,async: !1,beforeSend: function() {},success: function(data) {obj.html(data);if(ishash) window.location.hash = path;removefA(obj);return false;},error: function() {}})
}var filepath =""
$(document).ready(function(e) {console.log(location.protocol)if (location.protocol != "file:") {var url = location.hash.replace(/^#/, "");url = (url != "" && url.length > 2 ? url : $.defaultPage);loadUrl($.headContent,$.headUrl,false,false);loadUrl($.mainContent,url,true,true); loadUrl($.footContent,$.footUrl,false,false);}else{filepath =location.href.substring(0, location.href.lastIndexOf("/")+1)loadfile($.headContent,$.headUrl,false,false);loadfile($.mainContent,$.defaultPage,true,true); loadfile($.footContent,$.footUrl,false,false);}
});

View Code

再加上几个测试页面

测试页面1

 <div>我是测试面试页面1</div>

View Code

测试页面2 page2.htm，里面加了一个跳转，因为我们已经拦截a标签的跳转，所以我们也能实现hash跳转

<a href="page1.htm">跳转到第一页</a>
<div class="">测试页面 二 ：测试页面引用css   应该有效</div>
<div class="test3">我是页面2样式3</div>

View Code

测试页面3 page3.htm page3.css 引入了一个外链css文件，这里要重点说明一下。我们在这里引入了css3，页面顺利加载了page3.css文件,page3.htm 的样式得以改变，

紧接着我们再回到page2.htm.但是刚才的page3.css的样式没影响到page2.htm。这里是个要注意的问题了，说明样式文件是会被自动移除的，这和页面的样式表重新渲染相符。

<link rel="stylesheet" href="../css/page3.css">
<div class="">测试页面 三 ：测试外链页面引用css   应该有效</div>
<div class="test3">我就是test外链css</div>

View Code

.test3{display: block; width: 170px;height: 200px;background-color: #fb9876}

测试页面4 page4.htm。这里直接进来可以顺利触发fun4的方法

    <script type="text/javascript">function fun4 (argument) {// body...
        console.log("this method come from page 4")}</script><div class="">测试页面四 ：测试页面引用JS  应该有效</div>

View Code

测试页面5 page5.htm 这里可以顺利执行document.body.onload方法且执行本页的 $(function(){})方法体

<script type="text/javascript">$(function(){console.log("this is test 5")})
</script><div class="">测试页面五 ：测试内页引用JS （$(function(){})） 应该有效</div>

View Code

测试页面6 page6.htm page6.js

<script src="../js/page6.js" type="text/javascript"></script>
<div class="">测试页面六 ：测试外链引用 应该有效</div>
<script type="text/javascript">
fun4();
fun6();
</script>

View Code

function fun6(){alert("this is from 666666666666666")
}

View Code

最后你会发现，文件不管是外链js 还是内页js, 都会被存放在 index.htm。这可能会带来一些不好跟踪的问题

在做这个时候的时候可以脑补一下 htm页面渲染过程css和js的加载流程。

也顺便发现了一下其他该注意的问题

1、inline-table inline-block 4px间距问题

2、ajax读取本地文件设置问题

转载于:https://www.cnblogs.com/liubl/p/5291687.html

前端页面无刷新方案一相关推荐

基于jQuery的ajax系列之用FormData实现页面无刷新上传
接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...
社区网站功能实现系列(三)：社区页面无刷新回发的一种实现方式
页面无刷新回发实现有很多种方式,可以用XMLHttpRequest,一些js框架的ajax实现(如jQuery的 ajax),ajaxPro,MS的UpdatePanel,web服务等.下面我来介绍另 ...
php无刷新实现页面更新,使用laravel和ajax实现整个页面无刷新的操作方法
1.数据库文件 CREATE TABLE IF NOT EXISTS mr_key ( id int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT COMMENT ' ...
Sring3MVC页面无刷新上传文件
Sring3MVC页面无刷新上传文件首先,这个框架是利用Ajax与Ctroller进行表单提交和数据交互的,但是Ajax是无法支持File上传的,所以在这里我使用了隐藏的Iframe来做文件上传的数 ...
ajax 页面无刷新,Ajax的页面无刷新实现详解（附代码）
这次给大家带来Ajax的页面无刷新实现详解(附代码),Ajax页面无刷新实现的注意事项有哪些,下面就是实战案例,一起来看一下. ajax (ajax开发) AJAX即"Asynchronou ...
html网页无刷新数据更新,使用javascript怎么实现页面无刷新更新数据
使用javascript怎么实现页面无刷新更新数据发布时间:2021-03-18 17:22:21 来源:亿速云阅读:71 作者:Leah 这篇文章给大家介绍使用javascript怎么实现页面无 ...
【前端页面缓存技术方案】
前端页面缓存技术方案关于页面缓存数据的纯前端技术方案背景项目存在的现有方案思考
html 无刷新显示公告,用javascript实现页面无刷新更新数据_js
程序设计中会经常碰到一种情况,就是事先无法得知用户会需要哪些数据,必须根据用户选择后再从服务器重新提取数据后反馈给用户.比如一简单的情况,用户选择省份以后,我们立即会在市里边将这个省的所有市重新显示出 ...
前端页面生成pdf方案
前端页面生成pdf方案使用jsPDF的html方法生成直接将html节点传入jsPDF生成pdf,效果一般 const pdf = new jsPDF('p', 'pt', 'a4'); cons ...

前端页面无刷新方案一

前端页面无刷新方案一相关推荐

最新文章

热门文章

前端 页面无刷新方案一

前端 页面无刷新方案一相关推荐

最新文章

热门文章

前端页面无刷新方案一

前端页面无刷新方案一相关推荐