Могу ли я, должен ли я использовать обещания для загрузки iframe?

Question

У нас есть небольшое мобильное приложение с двумя панелями. Страница контейнера предоставляет скелет, а панели реализованы как IFrames. Нам нравятся iframes, потому что они создают область, разбивая панели, но наш текущий метод общения между панелями является неприятным. Панель 1 назначает свои вызывающие параметры в глобальной области, затем вызывает Panel2.location() для загрузки страницы. Обработчик onload Panel2 ищет ранее назначенные параметры вызова и делает это бизнес. Если есть ошибка HTTP, вызывающий не знает, и ошибка идет прямо на экран.

С обещаниями я мог бы сделать что-то гораздо приятнее. Загрузка Panel2 - это асинхронная операция. Я хотел бы быть в состоянии сделать это ...

Panel2.myAsynchLoad("myNewPage.html").then(
    function(myNewPage){ 
     myNewPage.someFunc(calling, parameters, passed, directly); 
    }, 
    function(err){ 
     ...errors notified to caller 
    } 
); 

Но писать myAsynchLoad(), я бегу прямо в проблемы. Если я загружу panel2 с помощью location(), у меня, кажется, нет способа получить ошибки HTTP. Если я использую XmlHttpRequest и document.write(), это не обычная загрузка страницы, а скрипты на новой странице не регистрируются.

Есть ли хороший способ сделать это? Должен ли я быть здесь в первую очередь? Ответы не используются jquery.

Answer 1

Если кто-то сюда вернет, я внедрил свою функцию. Мое решение состоит в том, чтобы дважды вызвать URL. Однажды с xmlHttpRequest, чтобы уловить любые ошибки, затем window.location() с тем же URL-адресом. Если заголовки кеширования установлены правильно, страница подается из кеша браузера без второго вызова на сервер. И это позволяет мне рассматривать страницы как объекты, на которые я могу вызывать функции, с обработкой ошибок, так что да, я думаю, что это довольно круто.

var waitingCaller = []; 
function goP(panel, url) { 
    return new Promise(function (resolve, reject) { 
     //first retrieve via AJAX to put in browser cache and recover eventual errors 
     getUrl(url).then(
      function (xhr) { 
       //ignore the response and change location with same url 
       waitingCaller[panel] = resolve; //We're not storing reject because we can't trap errors. From here we assume success. 
       panels[panel].contentWindow.location = url; 
      }, 
      function (err) { reject(err) } 
     ) 
    }); 
} 
function connectWaitingCaller(panel,event) { 
    waitingCaller[panel](panels[panel].contentWindow); //Call resolve, passing window reference 
    waitingCaller[panel] = null; //caller no longer waiting 
} 
panels[1].addEventListener("load", connectWaitingCaller.bind(this, 1)); 

Чтобы использовать ...

goP(1, "SomeNewPage.php") 
.then(function(SomeNewPage){ 
    SomeNewPage.myFunc(); 
}); 

Моя GetURL функция полезности, чтобы сделать ответ полный ...

//requêtes HTTP avec Promises ! 
//returns xhr object, used by getUrlAsXXX() functions 
function getUrl(url) { 
    // Return a new promise. 
    return new Promise(function (resolve, reject) { 
     // Do the usual XHR stuff 
     var xhr = new XMLHttpRequest(); 
     xhr.open('GET', url); 

     xhr.onload = function() { 
      // This is called even on 404 etc 
      // so check the status 
      if (xhr.status == 200) { 
       // Resolve the promise with the request object 
       // so downstream functions have full access. 
       resolve(xhr); 
      } 
      else { 
       // Otherwise reject with the status text 
       // which will hopefully be a meaningful error 
       reject(Error(xhr.status + " \"" + xhr.statusText + "\" while getting " + url)); 
      } 
     }; 

     // Handle network errors 
     xhr.onerror = function() { 
      reject(Error("Network Error")); 
     }; 

     // Make the request 
     xhr.send(); 
    }); 
}