监听地址栏hash值的变化

2018-01-27 12:43:28

1  history.js//兼容ie6+

2  hashchange

$(window).on("hashchange", function() {//兼容ie8+和手机端
            $('.div1').append(This.location.hash);
        });

3 pushState//兼容ie9+

http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/

http://www.cnblogs.com/hustskyking/p/history-api-in-html5.html

$('.a').on('click', function() {// 创建新history实体
             history.pushState({a:'aa'}, '', location.href+'?'+Math.random());
             });
             $('.b').on('click', function() {// 修改新history实体(虽然浏览记录确实生成了2条,但是实际你只能找到被修改后的{a:'bb'})
             history.replaceState({a:'bb'}, '', location.href+'?'+Math.random()+'------');
             });
             window.addEventListener('popstate', function() {// 前进后退触发
                console.log(history);
                console.log(history.state);// 这里是你设置的{a:'aa'}
             });


  • 2020-02-29 20:47:34

    Nuxt 特有函数和变量

    asyncData方法使得你能够在渲染组件之前异步获取数据。该方法在服务端中执行的,所以,请求数据时,不存在跨域问题。返回的数据将与 data() 返回的数据进行合并。由于asyncData方法是在组件 初始化 前被调用的,所以在方法内是没有办法通过 this 来引用组件的实例对象。

  • 2020-03-01 19:00:46

    触发onclick事件元素的获取

    自动生成元素的onclick事件 event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素

  • 2020-03-03 09:46:42

    JS实现HTML标签转义及反转义

    简单说一下业务场景,前台用户通过input输入内容,在离开焦点时,将内容在div中显示。 这时遇到一个问题,如果用户输入了html标签,则在div显示中,标签被解析。 由于是纯前端操作,不涉及后端,因此需要通过js对输入内容进行转义。

  • 2020-03-03 09:51:38

    写一个可插入自定义标签的 Textarea 组件

    为了实现这个功能,我最先想的是改造一个 <textarea> 然后我想到了 contenteditable (链接指向 mozilla.org) 这一属性 这是一个 html5 的属性,可以让元素内容可编辑