Проблема с кнопкой Chrome Back после взаимодействия с Iframe Angular - PullRequest
Новая
       38

Проблема с кнопкой Chrome Back после взаимодействия с Iframe Angular

0 голосов
/ 26 октября 2018

У меня есть угловое приложение. Ниже приведены следующие шаги:

  1. Клиент проходит через поток и попадает на одну из неполных страниц.

  2. На одной из неполных страниц я нажимаю кнопку, чтобы получить идентификатор из междоменного домена (выполняется через сервисный вызов, поэтому не возникает проблема CORS).

  3. Используя этот идентификатор, я добавляю к URL-адресу домена - что-то вроде http://externalpahe.com? ResponseId = ID

  4. Этот URL-адрес выполняется дочерним компонентом внутри Iframe.

  5. На этой странице кросс-домена Iframe есть две кнопки - ' Сохранить ' и ' Отмена '

  6. При нажатии любой из этих кнопок приложение перемещается назад.

  7. ВЫПУСК: После успешного перехода назад нажмите кнопку браузера Chrome , приложение перезагрузится.

Из-за этого поток приложения снова перезапускает , и клиенту необходимо пройти через поток снова . Хотя данные обновляются, по возвращении на частичную страницу, где действие было выполнено ранее, но это не хороший сценарий простоты использования.

Я использую приведенный ниже код для выполнения URL-адреса междоменного домена в iframe. Я сомневаюсь, что DomSanitizer вызывает странную проблему для Chrome. Для других браузеров работает нормально.

Угловой компонент: 

constructor(private sanitizer: DomSanitizer) { }

ngOnInit() {
    this.targetUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.sourceUrl);
}

Угловой шаблон: 

<iframe #crossDomainIframe [src]="targetUrl" (load)="onPageLoad()">
</iframe>

В onPageLoad() Я выполняю простую бизнес-логику отправки ответа родительскому компоненту. 

onPageLoad () {
    this.callbackResponse.emit(returnUrl);
}

Есть ли способ решить проблему?

Или кросс-домен может быть выполнен в Iframe другим способом?

1 Ответ

0 голосов
/ 02 ноября 2018

Короче говоря, нажатия кнопок "Назад" в этом сценарии являются постоянной проблемой в Интернете в целом.Тем не менее, пара идей.Идея первая: используйте событие onbeforeunload в окне: 

window.addEventListener('beforeunload', function(e){
    e.preventDefault();
    e.returnValue = 'Hitting the back button will make you start over!';
    return e.returnValue;
});

Не все браузеры будут отображать правильный текст диалога, но установка returnValue заставит все браузеры запросить пользователя, прежде чем фактически заставить все перезагрузиться, чтолучше чем ничегоК сожалению, он также сделает это при закрытии / обновлении окна, хотя вы можете удалить слушателя, как только закончите.

Идея вторая: установить хеш. 

var ignoreNextHashChange;
window.onhashchange = function(){
  if (ignoreNextHashChange)
    ignoreNextHashChange = false;
  else
    alert('Whoa there--using the back button will break the process!');
}

Затем на каждомЭтап вашего кода делает что-то вроде: 

ignoreNextHashChange = true;
window.location.hash = '#hashForThisStage';

Опять же, не на 100% идеально, но это заставит кнопку возврата откатывать хэши и запускать обнаруживаемое событие, а не прерывать весь поток.

Ура!

...