History API


                        history.length;

                        history.back();

                        history.forward();

                        history.go(-2);

                        history.go(2);

pushState


history.pushState(state, title, pathname);

history.pushState(null, null, '/films/warcraft');

state


const state = { title: 'Warcraft', text: '...' };

history.pushState(state, null, '/films/warcraft');

console.log(history.state);
// { title: 'Warcraft', text: '...' }

Состояние должно быть cериализуемо

И ограничено размером (640k в Firefox)

popstate


const state = { title: 'Warcraft', text: '...' };

history.pushState(state, null, '/films/warcraft');

addEventListener('popstate', event => {
    console.log(document.location.pathname, event.state);
});

history.back();
// '/' null

history.forward();
// '/films/warcraft' { title: 'Warcraft', text: '...' }

replaceState


const state = { openedTab: 'trailers' };

const pathname = document.location.pathname;

history.replaceState(state, null, pathname);

Поведение скролла


history.scrollRestoration = 'manual'; // auto, по умолчанию

Manipulating the browser history

Manipulating history for fun & profit

Editing

Selection API

Для орков нет другой жизни кроме войны

Выделение текста


const selection = window.getSelection();

// Выделить текст в domNode и всех вложенных нодах
selection.selectAllChildren(domNode);

// Вернуть текст
selection.toString();

// Удалить выделение
selection.removeAllRanges();

Буфер обмена


// Скопировать в буфер
document.execCommand('copy');

// Событие копирования в буфер
window.addEventListener('copy', () => {});

// Событие вставки из буфера
window.addEventListener('paste', event => {
    event.clipboardData.getData('text/html');
    event.clipboardData.getData('text/plain');
});

Поддержка

Clipboard.js

<input id="message">

<button data-clipboard-target="#message"></button>

const clipboard = new Clipboard('button');

clipboard.on('success', event => {
    const text = event.text;

    event.clearSelection();
});

execCommand contenteditable spellcheck

WYSIWYG

Веками магия и неприступные стены защищали людей от любых напастей. Но древнее зло, побежденное и забытое тысячелетия назад, пробудилось. В самом сердце королевства открылся темный портал, и раса невиданных существ наводнила земли Азерота. Так начались события, призванные навсегда изменить судьбу этого мира.

contenteditable

<div contenteditable></div>

spellcheck

<div contenteditable spellcheck></div>

Карова даёт малако!

Поддержка

execCommand


document.execCommand('bold')

document.execCommand('createLink', false, 'https://ya.ru/')

document.execCommand('insertHTML', false, '<p>Awesome!</p>');

document.queryCommandSupported('createLink');

Спецификация

Список команд

Demo