html5-history-api

html5-history-api.md

history 对象

http://javascript.ruanyifeng.com/bom/history.html

操纵浏览器的历史记录

https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history

window.history.back();

window.history.forward();

window.history.go(-1);

window.history.go(1);

window.history.length;

window.history.scrollRestoration;

window.history.state;

    window.history
    History {
        length: 14, 
        scrollRestoration: "auto", 
        state: 0
    }
    length: 14
    scrollRestoration: "auto"
    state: 0
    __proto__: History
        back: function back()
        forward: function forward()
        go: function go()
        length: (...)
        pushState: function pushState()
        replaceState: function replaceState()
        scrollRestoration: (...)
        state: (...)
        constructor: function History()
        Symbol(Symbol.toStringTag): "History"
        get length: function ()
        get scrollRestoration: function ()
        set scrollRestoration: function ()
        get state: function ()
        __proto__: Object

HTML5 简介（三）：利用 History API 无刷新更改地址栏

https://www.renfei.org/blog/html5-introduction-3-history-api.html

HTML5之pushstate、popstate操作history，无刷新改变当前url

http://frontenddev.org/article/html-5-pushstate-popstate-operating-history-no-refresh-to-change-the-current-url.html

ajax与HTML5 history pushState/replaceState实例

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

再详解history.pushState和history.replaceState以及page ajax的实现

http://www.tangshuang.net/2287.html

Using the HTML5 History API

https://css-tricks.com/using-the-html5-history-api/

https://stackoverflow.com/questions/4570093/how-to-get-notified-about-changes-of-the-history-via-history-pushstate

https://stackoverflow.com/questions/17612307/pushstate-what-exactly-is-the-state-object-for

 ( str1 < str2 ) ?  -1 :  ( str1 > str2 ? 1 : 0 );

ES2015中有四种相等算法：

https://gist.github.com/xgqfrms-GitHub/654c4f55bf773034a5641b5f9a47aa06

抽象相等比较 (==)
严格相等比较 (===): 用于 Array.prototype.indexOf, Array.prototype.lastIndexOf, 和 case-matching
同值零: 用于 %TypedArray% 和 ArrayBuffer 构造函数、以及Map和Set操作, 并将用于 ES2016/ES7 中的String.prototype.includes
同值: 用于所有其他地方

JavaScript提供三种不同的值比较操作：

严格相等 ("triple equals" 或 "identity")，使用 === ,
宽松相等 ("double equals") ，使用 ==
以及 Object.is （ECMAScript 2015/ ES6 新特性）

选择使用哪个操作取决于您正在寻找什么样的比较。

简而言之，在比较两件事情时，double equals将执行类型转换;
三等于将进行相同的比较，而不进行类型转换 (如果类型不同, 只是总会返回 false );
而Object.is的行为方式与三等式相同，但是对于NaN和-0和+0进行特殊处理，所以最后两个不相同，而Object.is（NaN，NaN）将为 true。
(通常将NaN与NaN进行比较-即, 使用双等号或三等于-评估为false，因为IEEE 754这样说.)
请注意，所有这些之间的区别都与其处理原语有关; 没有一个比较参数在概念上, 是否在结构上是相似的。

https://gist.github.com/xgqfrms-GitHub/a832eb33f702d7c2df2802fc875ac832

!! & !!(window.history && history.pushState)

http://javascript.ruanyifeng.com/bom/history.html#toc2

        if (!!(window.history && history.pushState)){
            console.log(`支持 History API`, history.pushState());
        } else {
            console.log(`%c 不支持 History API`, `color: red; font-size: 32px;`);
        }
        !!false
        // false
        !!(false);
        // false
        !!0
        // false
        !!1
        // true
        !0
        // true
        !1
        // false
        0 == false
        // true
        0 === false
        // false
        1 == true
        // true
        1 === true
        // false
        "0" == false
        // true
        "0" === false
        // false
        "1" == true
        // true
        "1" === true
        // false

Memo 备忘录, 便笺, 籙

https://github.com/browserstate/history.js/

https://javascript.xgqfrms.xyz/html5-history-api.html#pushState

if (!!(window.history && history.pushState)){
            console.log(
`支持 History API`, 
history.pushState(null, `history.pushState: title`, `https://javascript.xgqfrms.xyz/html5-history-api.html#pushState` )
            );
            /*
            state：
                一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。
                如果不需要这个对象，此处可以填null。
            title：
                新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
            url：
                新的网址，必须与当前页面处在同一个域。
                浏览器的地址栏将显示这个网址。
            */
        } else {
            console.log(`%c 不支持 History API`, `color: red; font-size: 32px;`);
        }

HashChangeEvent()

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/onhashchange

https://developer.mozilla.org/zh-CN/docs/Web/Events/hashchange

https://javascript.xgqfrms.xyz/html5-history-api.html#pushState

if ("onhashchange" in window) {
    alert("该浏览器支持hashchange事件!");
}

function locationHashChanged() {
    if (location.hash === "#somecoolfeature") {
        somecoolfeature();
    }
}

window.onhashchange = locationHashChanged;

html5 new features

https://html5.xgqfrms.xyz/html5-history-api.html

https://html5.xgqfrms.xyz/javascript-array-methods.html

https://html5.xgqfrms.xyz/new index.html

https://html5.xgqfrms.xyz/Sitemap.html

Star Ratings With Very Little CSS

https://css-tricks.com/star-ratings/

http://www.evotech.net/blog/2007/08/css-javascript-character-entities/

https://javascript.xgqfrms.xyz/pdfs/es6tutorial.pdf

Window.location

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/location

Window.location 只读属性，返回一个 {{domxref("Location")}}  对象，提供有关文档当前地址的信息。

尽管 Window.location 是一个只读 Location 对象，你仍然可以赋给它一个 {{domxref("DOMString")}}。
这意味着您可以在大多数情况下处理 location，就像它是一个字符串一样：
window.location = 'http://www.example.com'，是 window.location.href = 'http://www.example.com' 的同义词 。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5 history api</title>
</head>
<body>
    <div>
        <h1>
            html5 history api
        </h1>
    </div>
    <section>
        window.history.replaceState(argument1, argument2);
        window.history.pushState(argument1, argument2);
    </section>
    <section>
        <h2>Window.location</h2>
        <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/location" target="_blank">https://developer.mozilla.org/zh-CN/docs/Web/API/Window/location</a>
        <article>
            <h3>Window.location 只读属性，返回一个 {{domxref("Location")}}  对象，提供有关文档当前地址的信息。</h3>
            <p>
                尽管 Window.location 是一个只读 Location 对象，你仍然可以赋给它一个 {{domxref("DOMString")}}。
                这意味着您可以在大多数情况下处理 location，就像它是一个字符串一样：
                window.location = 'http://www.example.com'，是 window.location.href = 'http://www.example.com' 的同义词 。
            </p>
        </article>
    </section>
    <!-- js -->
    <script>
        "1" == 1;
        // true
        "1" === 1;
        // false
        "1" === "1";
        // true
    </script>
    <script>
        "string".localeCompare("");
        // 1
        "string".localeCompare("string");
        // 0
        "string".localeCompare("0");
        // 1
        "string".localeCompare("xyz");
        // -1
        "string".localeCompare("1");
        // 1
    </script>
    <script>
        if (!!(window.history && history.pushState)){
            console.log(`支持 History API`, history.pushState(null, `history.pushState: title`, `https://javascript.xgqfrms.xyz/html5-history-api.html#pushState` ));
            /*
            state：
                一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。
                如果不需要这个对象，此处可以填null。
            title：
                新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
            url：
                新的网址，必须与当前页面处在同一个域。
                浏览器的地址栏将显示这个网址。
            */
        } else {
            console.log(`%c 不支持 History API`, `color: red; font-size: 32px;`);
        }
        !!false
        // false
        !!(false);
        // false
        !!0
        // false
        !!1
        // true
        !0
        // true
        !1
        // false
        0 == false
        // true
        0 === false
        // false
        1 == true
        // true
        1 === true
        // false
        "0" == false
        // true
        "0" === false
        // false
        "1" == true
        // true
        "1" === true
        // false
    </script>
    <script>
        const somecoolfeature = () =>{
            console.log(`somecoolfeature()`, this);
        }
        if ("onhashchange" in window) {
            alert("该浏览器支持hashchange事件!");
        }
        function locationHashChanged() {
            if (location.hash === "#somecoolfeature") {
                somecoolfeature();
            }
        }
        window.onhashchange = locationHashChanged;
    </script>
    <script>
        window.history
        History {
            length: 14, 
            scrollRestoration: "auto", 
            state: 0
        }
        length: 14
        scrollRestoration: "auto"
        state: 0
        __proto__: History
            back: function back()
            forward: function forward()
            go: function go()
            length: (...)
            pushState: function pushState()
            replaceState: function replaceState()
            scrollRestoration: (...)
            state: (...)
            constructor: function History()
            Symbol(Symbol.toStringTag): "History"
            get length: function ()
            get scrollRestoration: function ()
            set scrollRestoration: function ()
            get state: function ()
            __proto__: Object
    </script>
</body>
</html>

事件处理程序内容属性列表

https://html.spec.whatwg.org/multipage/indices.html#event-hashchange

https://developer.mozilla.org/zh-CN/docs/Web/Events/hashchange

https://github.com/xgqfrms/javascript

浏览器的工作原理：新式网络浏览器幕后揭秘

https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/

DOMContentLoaded

https://developer.mozilla.org/zh-CN/docs/Web/Events/DOMContentLoaded

https://stackoverflow.com/questions/588040/window-onload-vs-document-onload

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

https://stackoverflow.com/questions/3698200/window-onload-vs-document-ready

https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener

https://www.w3.org/TR/navigation-timing/#dom-performancetiming-domcontentloadedeventend

https://www.w3.org/TR/navigation-timing/

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

https://developer.mozilla.org/en-US/docs/Web/API/Event

Location

https://developer.mozilla.org/zh-CN/docs/Web/API/Location

Location 接口表示其链接到的对象的位置（URL）, 所做的修改反映在与之相关的对象上。
Document 和 Window 接口都有这样一个链接的Location，分别通过 Document.location和Window.location 访问。

if (!!(window.history && history.pushState)){
        console.log(`支持 History API`, history.pushState(null, `history.pushState: title`, `https://javascript.xgqfrms.xyz/html5-history-api.html#pushState` ));
        /*
        state：
            一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。
            如果不需要这个对象，此处可以填null。
        title：
            新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
        url：
            新的网址，必须与当前页面处在同一个域。
            浏览器的地址栏将显示这个网址。
        */
        history.pushState(
            {
                page: 1, 
                page: 2, 
                page: 3, 
                page: 4
            }, 
            'title x', 
            '?page=x'
        );
        // undefined
        history.state;
        // Object {page: 4} 
        // page: 4 
        // __proto__: Object
        history.pushState(
            {
                page: 1
            }, 
            'title 1', 
            '#page=1'
        );
        // undefined
        history.state;
        // Object {page: 1}
        // page: 1
        // __proto__: Object
        location.hash
        // "#page=1"
        location.search
        // "?page=x"
    } else {
        console.log(`%c 不支持 History API`, `color: red; font-size: 32px;`);
    }

https://developer.mozilla.org/zh-CN/docs/Web/API/URLUtils

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5 history api</title>
    <style>
        span.statcounter {
            display: none;
        }
    </style>
    <script>
        const HIDE = () => {
            let hide = document.querySelector('.statcounter');
            hide.style.display = 'none';
        }
        window.document.onload = HIDE();
    </script>
</head>
<body>
    <div>
        <h1>
            html5 history api
        </h1>
    </div>
    <section>
        <pre>
            window.history.replaceState(argument1, argument2);
            window.history.pushState(argument1, argument2);
        </pre>
    </section>
    <section>
        <h2>Window.location</h2>
        <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/location" target="_blank">https://developer.mozilla.org/zh-CN/docs/Web/API/Window/location</a>
        <article>
            <h3>Window.location 只读属性，返回一个 {{domxref("Location")}}  对象，提供有关文档当前地址的信息。</h3>
            <p>
                尽管 Window.location 是一个只读 Location 对象，你仍然可以赋给它一个 {{domxref("DOMString")}}。
                这意味着您可以在大多数情况下处理 location，就像它是一个字符串一样：
                window.location = 'http://www.example.com'，是 window.location.href = 'http://www.example.com' 的同义词 。
            </p>
        </article>
    </section>
    <section>
        <a id="myAnchor" href="https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.search?q=123">myAnchor</a>
        <!-- 
        location.hash;
        // "#hash"
        location.search; 
        // "?q=123"
         -->
    </section>
    <!-- js -->
    <script>
        "1" == 1;
        // true
        "1" === 1;
        // false
        "1" === "1";
        // true
    </script>
    <script>
        "string".localeCompare("");
        // 1
        "string".localeCompare("string");
        // 0
        "string".localeCompare("0");
        // 1
        "string".localeCompare("xyz");
        // -1
        "string".localeCompare("1");
        // 1
    </script>
    <script>
        if (!!(window.history && history.pushState)){
            console.log(`支持 History API`, history.pushState(null, `history.pushState: title`, `https://javascript.xgqfrms.xyz/html5-history-api.html#pushState` ));
            /*
            state：
                一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。
                如果不需要这个对象，此处可以填null。
            title：
                新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
            url：
                新的网址，必须与当前页面处在同一个域。
                浏览器的地址栏将显示这个网址。
            */
            history.pushState(
                {
                    page: 1, 
                    page: 2, 
                    page: 3, 
                    page: 4
                }, 
                'title x', 
                '?page=x'
            );
            // undefined
            history.state;
            // Object {page: 4} 
            // page: 4 
            // __proto__: Object
            history.pushState(
                {
                    page: 1
                }, 
                'title 1', 
                '#page=1'
            );
            // undefined
            history.state;
            // Object {page: 1}
            // page: 1
            // __proto__: Object
            location.hash
            // "#page=1"
            location.search
            // "?page=x"
        } else {
            console.log(`%c 不支持 History API`, `color: red; font-size: 32px;`);
        }
        !!false
        // false
        !!(false);
        // false
        !!0
        // false
        !!1
        // true
        !0
        // true
        !1
        // false
        0 == false
        // true
        0 === false
        // false
        1 == true
        // true
        1 === true
        // false
        "0" == false
        // true
        "0" === false
        // false
        "1" == true
        // true
        "1" === true
        // false
    </script>
    <script>
        const somecoolfeature = () =>{
            console.log(`somecoolfeature()`, this);
        }
        if ("onhashchange" in window) {
            alert("该浏览器支持hashchange事件!");
        }
        function locationHashChanged() {
            if (location.hash === "#somecoolfeature") {
                somecoolfeature();
            }
        }
        window.onhashchange = locationHashChanged;
    </script>
    <script>
        window.history
        History {
            length: 14, 
            scrollRestoration: "auto", 
            state: 0
        }
        length: 14
        scrollRestoration: "auto"
        state: 0
        __proto__: History
            back: function back()
            forward: function forward()
            go: function go()
            length: (...)
            pushState: function pushState()
            replaceState: function replaceState()
            scrollRestoration: (...)
            state: (...)
            constructor: function History()
            Symbol(Symbol.toStringTag): "History"
            get length: function ()
            get scrollRestoration: function ()
            set scrollRestoration: function ()
            get state: function ()
            __proto__: Object
    </script>
</body>
</html>

https://html5.xgqfrms.xyz/index.html?q=xgqfrms
https://html5.xgqfrms.xyz/index.html#history-api

https://html5.xgqfrms.xyz/index.html?q=xgqfrms#history-api

https://dsqcw.xgqfrms.xyz/html5/index.html

防盗

https://html5.xgqfrms.xyz/Canvas/safety-canvas.html

https://www.cnblogs.com/vajoy/p/5656439.html

https://www.cnblogs.com/vajoy/category/558868.html

https://www.cnblogs.com/vajoy/p/3996979.html

Basics of CSS Blend Modes

https://css-tricks.com/basics-css-blend-modes/

https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins

chrome --unsafely-treat-insecure-origin-as-secure="http://i.cnblogs.com/h5monitor/final.html"  --user-data-dir=C:\testprofile

https://github.com/VaJoy

https://www.cnblogs.com/vajoy/p/3996979.html