前端页面无刷新方案二

Posted 2020-06-25

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端页面无刷新方案二相关的知识，希望对你有一定的参考价值。

开始方案二用html5 history.pushState(state,null,url); （IE9及以下版本不支持）

/**
 * HTML5 history and ajax
 */

 $(function(){
    var ajax,
        currentState;
    $(‘li a‘).unbind().bind(‘click‘,function(e){
        e.preventDefault();
        var target = e.target,
            url = $(target).attr(‘href‘);
        !$(this).hasClass(‘current‘) && $(this).addClass(‘current‘).siblings().removeClass("current");
        if(ajax == undefined) {
            currentState = {
                url: document.location.href,
                title: document.title,
                html: $(‘.content‘).html()
            };
        }
        ajax = $.ajax({
                type:‘GET‘,
                url: url,
                dataType:‘html‘,
                success: function(html){
                
                    var state = {
                        url: url,
                        title: document.title,
                        html: $(‘.content‘).html()
                    };
                    history.pushState(state,null,url);
                    $(‘.content‘).html(html)
                }
        });
        
    });


 });

View Code

首页代码 index.htm

<!DOCTYPE HTML>
<html>
 <head>
  <title> New Document </title>
  <link rel="stylesheet" href="http://css.baojia.com/s4/c/css/reset.css">
  <style>
        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;}
        ul li.current{background: #ffde32}
    /*.all-content{width:400px;float:left;overflow:hidden;}*/
  </style>
 </head>

 <body>
    <div class="container">
        <ul class="list">
            <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>       
    </div>
     <div class="content">
           
        </div>
     <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
    <script src="../js/index.js" type="text/javascript"></script>
 </body>
</html>

View Code

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

View Code

再加上几个测试页面

测试页面1

View Code

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

View Code

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

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

View Code

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

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

View Code

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

View Code

测试页面6 page6.htm page6.js

View Code

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

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

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

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

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

以上是关于前端页面无刷新方案二的主要内容，如果未能解决你的问题，请参考以下文章

ASP.NET ashx实现无刷新页面生成验证码

注册表单无刷新验证+php无刷新刷新验证码

wepy 小程序定时器（验证码倒计时）数据绑定页面无刷新

前端防扒代码片段

前端 页面无刷新方案二

前端页面无刷新方案二