<!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. WML标签速查手册 wap标签

    原文发布时间为:2010-08-19 -- 来源于本人的百度文章 [由搬家工具导入] WML标签速查手册(转)比较方便便于速查   结构相关标签 语法及属性 <wml> <wml x ...

  2. The type or namespace name 'Html' does not exist in the namespace 'System.Web.Mvc' (are you missing an assembly reference?)

    The type or namespace name 'Html' does not exist in the namespace 'System.Web.Mvc' (are you missing ...

  3. 图表插件echars的使用案例

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

  4. JavaScript-性能优化，函数节流（throttle）与函数去抖（debounce）

    我在写一个类似百度搜索框的自动提示功能时候,使用了AJAX+keydown事件.调试时候我发现,当在搜索框中输入文字的时候,控制台在不停发送AJAX.这在本地服务器测试还好,如果我把它拿到运行环境,很 ...

  5. （一）为什么要学习docker

    一.docker的历史与现状 1.PAAS平台的范围和内容 1.确定产品定位和需求,确定首次迭代的范围. 2.制作界面原型. 以下是 paas 范畴 .技术选型,然后根据技术选型为每个开发者搭建开发环 ...

  6. map、hash_map、unordered_map 的思考

    #include <map> map<string,int> dict; map是基于红黑树实现的,可以快速查找一个元素是否存在,是关系型容器,能够表达两个数据之间的映射关系. ...

  7. LeetCode OJ-- Divide Two Integers *

    https://oj.leetcode.com/problems/divide-two-integers/ 在不使用乘法.除法.求余的情况下计算除法. 使用减法计算,看看减几次. 刚开始寻思朴素的暴力 ...

  8. (7)python tkinter-菜单栏

    菜单栏 Menu f = tkinter.Menu(root) root['menu']=f f.add_command(label='菜单')# f.add_command(label='关于') ...

  9. Codeforces 762A k-th divisor(数论)

    题目链接:k-th divisor 求出N的第K大因子,满足N <= 10^15,K <= 10^9 直接暴力…… #include <bits/stdc++.h> using ...

  10. 洛谷——P1125 笨小猴

    P1125 笨小猴 题目描述 笨小猴的词汇量很小,所以每次做英语选择题的时候都很头疼.但是他找到了一种方法,经试验证明,用这种方法去选择选项的时候选对的几率非常大! 这种方法的具体描述如下:假设max ...