<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>HTML5无刷修改url - 琼台博客</title>

        <script type="text/javascript">

            function changeURL(){

                var url = document.getElementById('url').value;

                window.history.pushState({},0,'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>

        <div style="margin-top:30px;"><a href="http://www.qttc.net/201303292.html" target="_blank">《html5无刷新改变URL》</a> - 琼台博客</div>

    </body>

</html>

　　http://www.qttc.net/201303292.html

无刷新URL 更新的更多相关文章

  1. Jquery无刷新实时更新表格数据

    html代码: <style> .editbox { display:none } .editbox { font-size:14px; width:70px; background-co ...

  2. 利用history.pushState()实现页面无刷新更新

    本来是在研究vue-router如何记录滚动位置,点返回的时候还是回到原来的位置,看到有人说的history.state存了一个值,才把history研究一下,发现 history.pushState ...

  3. 使用AjaxPro实现无刷新更新数据

    需求 在一个页面动态无刷新的更新后台得到的数据.要想无刷新的更新数据,需要使用Javascript能够获取后台返回的数据,然后通过第三方Javascript库(JQuery等)动态更新web页面DOM ...

  4. AjaxPro实现无刷新更新数据

    使用AjaxPro实现无刷新更新数据 需求 在一个页面动态无刷新的更新后台得到的数据.要想无刷新的更新数据,需要使用Javascript能够获取后台返回的数据,然后通过第三方Javascript库(J ...

  5. window.history.pushState与ajax实现无刷新更新页面url

    ajax能无刷新更新数据,但是不能更新url HTML5的新API: window.history.pushState, window.history.replaceState 用户操作history ...

  6. [转]jquery 点击表格变为input可以修改无刷新更新数据

    原文地址:http://www.freejs.net/article_biaodan_43.html 之前已经发了2篇类似的文章<点击变td为input更新>和<jquery表格可编 ...

  7. jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格

    td点击后变为input可以输入,更新数据,无刷新更新 演示 XML/HTML Code <table border="0" cellpadding="0" ...

  8. HTML5无刷新修改Url,history pushState/replaceState

    一.认识window.history window.history表示window对象的历史记录,是由用户主动产生,并且接受javascript脚本控制的全局对象.window对象通过history对 ...

  9. 仿联想商城laravel实战---5、无刷新的增删改查（动态页面更新的三种方式（html））

    仿联想商城laravel实战---5.无刷新的增删改查(动态页面更新的三种方式(html)) 一.总结 一句话总结: 直接js增加删除修改html 控制器直接返回处理好的页面 用双向绑定插件比如vue ...

随机推荐

  1. [LeetCode] Longest Common Prefix 字符串公有前序

    Write a function to find the longest common prefix string amongst an array of strings. Hide Tags Str ...

  2. MSP430 G2553 寄存器列表与引脚功能

    USCI_B0 USCI_B0 发送缓冲器UCB0TXBUF 06Fh USCI_B0 接收缓冲器UCB0RXBUF 06Eh USCI_B0 状态UCB0STAT 06Dh USCI B0 I2C ...

  3. Spring Boot学习——数据库操作及事务管理

    本文讲解使用Spring-Data-Jpa操作数据库. JPA定义了一系列对象持久化的标准. 一.在项目中使用Spring-Data-Jpa 1. 配置文件application.properties ...

  4. 分享C#识别图片上的数字

    通过Emgu实现对图片上的数字进行识别.前期步骤:1.下载Emgu安装文件,我的版本是2.4.2.1777.3.0版本则实现对中文的支持.2.安装后需填写环境变量,环境变量Path值后加入Emgu安装 ...

  5. (1)jquery基本用法

    引入jquery 本地引用 <script src="jquery-3.2.1.js"></script> 网络引用 谷歌CDN <script sr ...

  6. 洛谷 P4256 公主の#19准备月考

    题目背景 公主在玩完游戏后,也要月考了.(就算是公主也要月考啊QWQ) 题目描述 公主的文综太差了,全校排名1100+(全校就1100多人),她分析了好久,发现她如果把所有时间放在选择题上,得分会比较 ...

  7. Understanding Objective-C Blocks

    The aim of this tutorial is to give a gentle introduction to Objective-C blocks while paying special ...

  8. 前端模板adminlte

    adminlet是一个前端模板,包含各种各样的功能,自己的网站可以根据需要进行修改:可以免费使用,也有收费增强版,界面如下: 参考: 1.https://adminlte.io/ 2.https:// ...

  9. VS2010 MFC中 单独添加ODBC数据库记录集类(CRecordset)方法

    基于VS2010 MFC的项目是之前建好的,后来需要添加数据库. 方法分享于此. 1.  打开自己的项目,项目->添加类. 2. 选MFC ODBC使用者,点右下角的添加. 3. 点数据源. / ...

  10. css :before 和 :after

    :before p:before 在每个 <p> 元素的内容之前插入内容. 2 :after p:after 在每个 <p> 元素的内容之后插入内容. 2 <!DOCTY ...