<!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. poj 2441 Arrange the Bulls

    Arrange the Bulls Time Limit: 4000MS   Memory Limit: 65536K Total Submissions: 5427   Accepted: 2069 ...

  2. pat 团体天梯赛 L3-010. 是否完全二叉搜索树

    L3-010. 是否完全二叉搜索树 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 将一系列给定数字顺序插入一个初始为空的二叉搜 ...

  3. 【HDOJ5976】Detachment（贪心）

    题意:给定n,要求构造若干个各不相同且和为n的正整数使得它们的乘积最大 T<=1e6,1<=n<=1e9 思路:From https://blog.csdn.net/qq_34374 ...

  4. LOJ#2244. 「NOI2014」起床困难综合症

    $n \leq 1e5$个位运算操作,$m \le 2^{30}$,问$0-m$中谁进行完所有操作值最大,输出这个最大值. cfA题难度?当送分题就不管了 and相当于几个位取0,or相当于几个位取1 ...

  5. android基本控件学习-----TextView

    一.TextView的讲解 <实例一> <?xml version="1.0" encoding="utf-8"?> <Linea ...

  6. shell特殊符号用法大全

      # 注释符号(Hashmark[Comments]) 1.在shell文件的行首,作为shebang标记,#!/bin/bash; 2. 其他地方作为注释使用,在一行中,#后面的内容并不会被执行, ...

  7. AC日记——[HNOI2007]紧急疏散evacuate bzoj 1189

    [HNOI2007]紧急疏散evacuate 思路: 处理每个人到门的最短路: 然后二分答案: s向人连边流量1: 人向门拆分后的点连边流量1(拆成400,前一个点连当前点流量INF): 然后门向t连 ...

  8. python第三方库安装-多种方式

    第一种方式:安装whl文件 pip install whatever.whl   第二种方式:安装tar.gz文件 一般是先解压,然后进入目录之后,有setup.py文件 通过命令 python se ...

  9. NULL的学问

    在数据库中存在一种特殊的值:NULL(空值).一个字段如果没有被赋值,那么它的值就是NULL,NULL并不代表没有值而是表示值未知.员工信息表中存储着身份证号.姓名.年龄等信息,其中某条记录中年龄字段 ...

  10. JAVA基础之List接口

    个人理解: list接口是Collection接口的子类,其继承了Collection接口的所有方法,但也有其独有的方法,不过在迭代的时候不要进行任何操作.牢记数据存储的四种结构:堆栈.队列.数组.链 ...