Как обновить iframe на странице, созданной с помощью Espasyncwebserver

Question

Как обновить iframe на странице, созданной с помощью Espasyncwebserver

Итак, у меня есть эта страница на esp8266:

  controlserver.on("/UDEL", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "text/html", htmltd);
  });

htmltd — это строка, сгенерированная функцией и содержащая несколько форм, которые выполняются в теге iframe,

<FORM action="/process" method="post" id="config" target="iframe">


</form>

<iframe style="visibility: hidden;" src="http://" )+local_IPstr+"/UDEL"  name="iframe"></iframe>

и обработано:

controlserver.on("/process", HTTP_POST, [](AsyncWebServerRequest *request) {
.
.
.
request->send(200, "text/html", HTML_CSS_STYLING + "<script>alert(\" Deleted \")</script>");
.
.
.
});

Они работают отлично, и после нажатия кнопки «Отправить» на странице отображается предупреждение, и ее необходимо перезагрузить, поскольку отправленная форма должна быть удалена со страницы. это происходит, когда я перезагружаю страницу вручную. но я хочу, чтобы это происходило автоматически после каждой отправки формы. он пробовал разными способами, например:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Reload iFrame</title>
  </head>
  <body>
    <iframe src="https://www.w3schools.com" id="myIframe"></iframe>

   
  <input onclick="reloadIframe()"  type="button" value="Click me">

    <script>
      function reloadIframe() {
        var iframe = document.getElementById("myIframe");
        iframe.contentWindow.location.reload();
      }
    </script>
  </body>
</html>

но это не работает в esp8266.

@M A K, 👍2

Обсуждение

«это не работает»… это крайне расплывчатое описание наблюдаемого поведения… что именно происходит? ... пожалуйста, обновите свой вопрос ... **не** добавляйте информацию в комментарии, @jsotola

форма должна быть удалена со страницы... почему бы вам просто не скрыть ее? ... перезагрузка страницы не потребуется, @jsotola

вот пример обновления веб-страницы без перезагрузки https://projecthub.arduino.cc/donskytech/nodemcu-esp8266-ajax-enabled-web-server-928fa0, @jsotola

@jsotola да, ты прав, я работал над этим весь день и немного устал. ничего не происходит, когда я попробовал описанный метод. Мой проект довольно большой, и на этой странице много форм, поэтому я хотел сэкономить немного места. спасибо, я посмотрю., @M A K

ваша главная страница может представлять собой просто скелет HTML, который использует XHR для загрузки каждой формы по мере необходимости..., @jsotola

1 ответ

Лучший ответ:

@*b1n3t* · Accepted Answer · 2023-08-31 17:20-00:00

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

Думаю, вы могли бы использовать небольшой трюк, чтобы решить эту проблему.

1- После успешной обработки данных формы внутри iframe отправьте обратно скрипт, который взаимодействует с родительским окном (главной страницей) и дает ему указание перезагрузить

2- На главной странице прослушайте полученное сообщение и затем перезагрузите его.

Вот как реализовать предлагаемое решение:

В обработчике маршрута ESP8266 отправьте в ответ скрипт, чтобы отправить сообщение в родительское окно после обработки формы:

controlserver.on("/process", HTTP_POST, [](AsyncWebServerRequest *request) {
    //добавим свой код обработки
    String response = HTML_CSS_STYLING + 
                      "<script>" 
                      "window.parent.postMessage('reloadPage', '*');" 
                      "</script>";
    request->send(200, "text/html", response);
});

window.parent.postMessage отправит сообщение "reloadPage" строка из iframe в родительское окно. А на своей главной странице (странице, содержащей iframe) прослушайте это сообщение и перезагрузите всю страницу при получении сообщения:

<FORM action="/process" method="post" id="config" target="iframe">
    <!-- form field here -->
</form>

<iframe style="visibility: hidden;" src="http://"+local_IPstr+"/U DEL" name="iframe"></iframe>

<script>
    // прослушиваем сообщения от iframe
    window.addEventListener('message', function(event) {
        // Ожидаем сообщение reloadPage
        if(event.data === 'reloadPage') {
            location.reload();
        }
    });
</script>

Кстати, вместо использования iframe вы можете использовать AJAX для отправки формы, чтобы получить ответ непосредственно с сервера и обновить страницу с помощью location.reload(). Таким образом, вы можете отправлять данные формы (или получать данные), не обновляя всю страницу. Обновляются только необходимые части страницы.

Надеюсь, это поможет, если нет, сообщите мне.