У меня сложная форма, которую я упростил для этого вопроса и размещался как плунж.
Три функции onclick для 'edit' openEditor(i: number, isEditor: boolean)
, 'add and' save changes moveToItem()
все используют window.location.hash для перехода к редактору, который иначе скрыт при неактивном.
Он работает так, как ожидалось, но не в хроме. Я собираюсь сделать это с хромом, обновляющим страницу, поскольку он рассматривает хеш-изменения как генерирующие новый URL-адрес
Вопрос:
Может ли кто-нибудь предложить относительно простое исправление, которое будет работать на хром (и в примере)?
Если это не лучший способ управления редактором в форме?
Я думал о создании отдельного дочернего компонента для редактора, поскольку он много происходит в FormComponent), но не уверен, что это поможет решить эту проблему, поскольку мне все равно нужно будет перейти к точке на странице, где она сидит, а затем вернуться к соответствующие данные.
Редактор должен существовать в форме и получать доступ/обновлять данные формы.
Некоторые вещи, которые я пробовал:
установка хэша пустым или нулевым:
window.location.hash = null;
window.location.hash = '';
Превращение # в значение
window.location.hash = '#form-editor';
также:
(<HTMLScriptElement>document.querySelector('#' + 'form-editor')).scrollIntoView();
и с pushState я могу изменить URL-адрес, но он не перемещается в точку привязки:
window.history.pushState(null, null, '#form-editor');
window.history.replaceState(null, null, '#form-editor');
Дополнительная информация:
Функция добавления добавляет новый элемент в список после выбранного элемента
Якорная точка для редактора форм:
<div id="form-editor">
и для каждого номера позиции создается динамический идентификатор:
<div id="item{{i}}">Item: {{i}}</div>
Благодарю!
На ошибке обновления Chrome я прочитал, что только щелчок на якоре - с href
указывающим на место хэша, которое мы хотим - будет работать. Итак, мы должны закодировать что-то, что сделаем это, как этот пусковой body
:
<body unbeforeunload="whereWeWantToScroll.click()"> <a id="whereWeWantToScroll" href="#form-editor" style="display: none"> Reposition to the right place </a>
В этом примере якорь скрыт, но скорее должен быть position: fixed
если есть только unbeforeunload
который запускает его.