H5修改url之pushState()和页面下拉加载判断

来源：互联网发布：软件企业证书有效期编辑：程序博客网时间：2024/05/02 01:39

1.pushState方法

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>HTML5无刷修改url</title>        <script type="text/javascript">            function changeURL(){                var url = document.getElementById('url').value;                document.title = 'url';                window.history.pushState({}, null, 'http://'+window.location.host+'#'+url);                  }         </script>     </head>    <body>        <h1>html5无刷新改变url</h1>        <div id="info" style="margin:30px 0;">            页面真实地址:            <span style="color:red;"><script type="text/javascript">document.write(window.location.href);</script></span>        </div>        <div>        请输入要改变地URL字符串：<input id='url' type="text" />        <button onclick="changeURL();">点击无刷改变url</button>        </div>        <div style="color:red;margin-top:30px;">请使用支持html5的浏览器访问</div>    </body> </html>

2.页面下拉加载判断

<!DOCTYPE=html><html><head><script src="jquery.min.js" type="text/javascript"></script></head><body style="overflow:hidden;"><div>loading</div>    <div class="main" style="height:600px;overflow:auto;"><div class="child" style='border:1px solid red;margin-top:20px;color:grey;height:700px' ></div>    </div></body><script  type="text/javascript">$(document).ready(function(){$(".main").unbind("scroll").bind("scroll", function(e){var sum = this.scrollHeight;if (sum <= $(this).scrollTop() + $(this).height()) {$(".main").append($(".child").clone());}});});</script></html>

0 0