0

我拼命地尝试在字符串中编写 HTML 代码，因为我无法在 ESP32 上使用文件系统。（信息：服务器无法访问互联网（AP 模式），我无法在 ESP32 上加载任何文件。所以我需要一个字符串作为解决方法）。

我的 ESP32 上正在运行服务器和主页。

在脚本标记内，我的字符串中缺少代码（在浏览器开发人员模式下观看）。

如果我在脚本标签上方注释了几行代码，那么脚本标签内的代码又是完整的。script-tag 之后的代码永远不会丢失并且总是完整的（参见注释）。

有人有想法吗？

此外，脚本代码并没有做我想做的事情。div 不会更新其内容，它是静态的。我已经尝试了几个选项，但我是 HTML 和 Javascript 的新手。

我很高兴任何提示。

这是 HTML 字符串的代码：

String html_document() {
  sHTML = "<!doctype html>";
  sHTML +="<html>";
  sHTML +="<html lang=\"de\">";
/***************** head ****************/
  sHTML +="<head>";
    /****** avoid favicon requests ** <link rel=\"icon\" href=\"data:;base64,iVBORw0KGgo=\">  ** <link rel=\"shortcut icon\" href=\"data:image/x-icon;,\" type=\"image/x-icon\"> **/
    sHTML +="<link rel=\"icon\" href=\"data:;base64,iVBORw0KGgo=\"> ";
    sHTML +="<meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">";    //Anpassung an Viewport für unterschiedliche Devices
/***************** title ***************/
    sHTML +="<title>LetsgoING IoT</title>";
    sHTML +="<style>h1{display: flex; flex-flow: row wrap; justify-content: center;} </style>";
    sHTML +="<style>h1{ color: green;}</style>";
    sHTML +="<style>h2{display: flex; flex-flow: row wrap; justify-content: center;} </style>";
    sHTML +="<style>h2{ color: blue;}</style>";
    sHTML +="<style>h5{display: flex; flex-flow: row wrap; justify-content: center;} </style>";
    sHTML +="<style>p{display: flex; flex-flow: row wrap; justify-content: center; margin-bottom: 3%;} </style>";
    sHTML +="<style>p1{display: flex; flex-flow: row wrap; justify-content: center; margin-bottom: 0%;} </style>";
    sHTML +="<style>p2{display: flex; flex-flow: row wrap; justify-content: center; margin-bottom: 0%;} </style>";

  sHTML +="</head>";
/***************** body ****************/
sHTML+= "<body>";

sHTML += " <script type=\"text/javascript\">";
sHTML += " var interVar;";
sHTML += " </script>";

  sHTML+= "<h1>LetsgoING</h1>";
  sHTML+= "<h2>Internet der Dinge</h2>";

  sHTML+= "<p1><a style=\"width:38%;\"></a><a style=\"width:20%;color: green\">LED ein</a> <a style=\"width:15%;\" href=\"LEDON\"><button> EIN </button></a> </a><a style=\"width:27%;\"> </a></p1>";
  sHTML+= "<p><a style=\"width:38%;\"></a><a style=\"width:20%;color: red\"  >LED aus</a> <a style=\"width:15%\"; href=\"LEDOFF\"><button>AUS</button></a><a style=\"width:27%;\"> </a></p>";

  sHTML+= "<h5>RGB-LED PWM-Werte</h5>";
  sHTML+= "<form><p2>";
  sHTML+= "<a style=\"width:38%;\"></a> <a style=\"width:20%;color: red\"> Rot</a>  <a style=\"width:15%;\" ><input name=\"rot\" type=\"number\" min=\"0\" max=\"255\" step=\"1\" value=\"80\" ></a><a style=\"width:27%;\"> </a>";
  sHTML+= "<a style=\"width:38%;\"></a> <a style=\"width:20%;color: green\">Grün</a><a style=\"width:15%;\" ><input name=\"gruen\" type=\"number\" min=\"0\" max=\"255\" step=\"1\" value=\"80\"></a><a style=\"width:27%;\"> </a>";
  sHTML+= "<a style=\"width:38%;\"></a> <a style=\"width:20%;color: blue\">Blau</a> <a style=\"width:15%;\" ><input name=\"blau\" type=\"number\" min=\"0\" max=\"255\" step=\"1\" value=\"80\"></a><a style=\"width:27%;\"> </a>";
  sHTML+= "</p2>";
  sHTML+= "<p><a style=\"width:38%;\"></a> <a style=\"width:20%;\">         </a>   <label style=\"width:15%;\" ><input type=\"submit\" value=\"senden\"></label><a style=\"width:27%;\"></a></p>";
  sHTML+= "</form>";

  sHTML+= "<form><p2><a style=\"width:38%;\"></a> <a style=\"width:20%;color: blue\">analoger Schwellwert</a> <a style=\"width:15%;\" ><input name=\"schwell\" type=\"number\" min=\"0\" max=\"1024\" step=\"10\" value=\"300\"></a><a style=\"width:27%;\"> </a></p2>";
  sHTML+= "<p><a style=\"width:38%;\"></a> <a style=\"width:20%;\">         </a>   <label style=\"width:15%;\" ><input type=\"submit\" value=\"senden\"></label><a style=\"width:27%;\"></a></p>";
  sHTML+= "</form>";

  sHTML+="<p><a style=\"width:50%;\">Analoger Output 1:  </a><div id=\"an1\"; style=\"width:25%;\"></div> <a style=\"width:25%;\"></a></p>";
  sHTML+="<p><label style=\"width:50%;\" for=\"analog\">Analoger Output 2:  </label><div id=\"an2\"; style=\"width:25%;\">Analoger Wert2</div> <a style=\"width:25%;\"></a></p>";

  sHTML += "<script type=\"text/javascript\">";
    sHTML += "function updateDiv () { ";
    sHTML += "document.getElementById(\"an1\").innerHTML(\""; //setText
    sHTML += analog1;
    sHTML += "\"); ";
    sHTML += "document.getElementById(\"an2\").textContent(\"";
    sHTML += analog2;
    sHTML += "\"); ";
    sHTML += "}";

//from here code is missing...

    sHTML += " function laDn(){";
    sHTML += "interVar = window.setInterval(updateDiv, 10000);}";
//up to here.

  sHTML += "</script>";

sHTML+= "</body>";
sHTML+= "</html>";

return sHTML;
}

这是字符串被剪切的部分（输出，原始 HTML）：

 <script type="text/javascript">function updateDiv () {
document.getElementById("an1").innerHTML("4095"); 
document.getElementById("an2").textContent("27"); } 
function laDn(</script>

编辑：在这两者之间，我找到了一种让整个事情正常工作的方法（见我的评论）。如果有人对代码感兴趣，请发表评论。

我发现了一个语法错误。代替：

 sHTML += "document.getElementById(\"an2\").textContent(\"";
        sHTML += analog2;
        sHTML += "\"); ";

肯定是：

sHTML += "document.getElementById(\"an2\").textContent = \"";
    sHTML += analog2;
    sHTML += "\"; ";

（没有括号 () 但 '=' ）

这是我的新代码，有一些更改：

String html_document(){
  sHTML = "<!doctype html>";
  sHTML +="<html>";
  sHTML +="<html lang=\"de\">";
/***************** head ****************/
  sHTML +="<head>";
    /****** avoid favicon requests ** <link rel=\"icon\" href=\"data:;base64,iVBORw0KGgo=\">  ** <link rel=\"shortcut icon\" href=\"data:image/x-icon;,\" type=\"image/x-icon\"> **/
    sHTML +="<link rel=\"icon\" href=\"data:;base64,iVBORw0KGgo=\"> ";
    sHTML +="<meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">";    //Anpassung an Viewport für unterschiedliche Devices
/***************** title ***************/
    sHTML +="<title>LetsgoING IoT</title>";
    sHTML +="<style>h1{display: flex; flex-flow: row wrap; justify-content: center;} </style>";
    sHTML +="<style>h1{ color: green;}</style>";
    sHTML +="<style>h2{display: flex; flex-flow: row wrap; justify-content: center;} </style>";
    sHTML +="<style>h2{ color: blue;}</style>";
    sHTML +="<style>h5{display: flex; flex-flow: row wrap; justify-content: center;} </style>";
    sHTML +="<style>p{display: flex; flex-flow: row wrap; justify-content: center; margin-bottom: 3%;} </style>";
    sHTML +="<style>p1{display: flex; flex-flow: row wrap; justify-content: center; margin-bottom: 0%;} </style>";
    sHTML +="<style>p2{display: flex; flex-flow: row wrap; justify-content: center; margin-bottom: 0%;} </style>";
  sHTML +="</head>";

/***************** body ****************/
sHTML+= "<body>";   //onload=\"window.setInterval(updateDiv, 15000);\"

  sHTML+= "<h1>LetsgoING</h1>";
  sHTML+= "<h2>Internet der Dinge</h2>";

  sHTML+= "<p1><a style=\"width:38%;\"></a><a style=\"width:20%;color: green\">LED ein</a> <a style=\"width:15%;\" href=\"LEDON\"><button> EIN </button></a> </a><a style=\"width:27%;\"> </a></p1>";
  sHTML+= "<p><a style=\"width:38%;\"></a><a style=\"width:20%;color: red\"  >LED aus</a> <a style=\"width:15%\"; href=\"LEDOFF\"><button>AUS</button></a><a style=\"width:27%;\"> </a></p>";

  sHTML+= "<h5>RGB-LED PWM-Werte</h5>";
  sHTML+= "<form><p2>";
  sHTML+= "<a style=\"width:38%;\"></a> <a style=\"width:20%;color: red\"> Rot</a>  <a style=\"width:15%;\" ><input name=\"rot\" type=\"number\" min=\"0\" max=\"255\" step=\"1\" value=\"80\" ></a><a style=\"width:27%;\"> </a>";
  sHTML+= "<a style=\"width:38%;\"></a> <a style=\"width:20%;color: green\">Grün</a><a style=\"width:15%;\" ><input name=\"gruen\" type=\"number\" min=\"0\" max=\"255\" step=\"1\" value=\"80\"></a><a style=\"width:27%;\"> </a>";
  sHTML+= "<a style=\"width:38%;\"></a> <a style=\"width:20%;color: blue\">Blau</a> <a style=\"width:15%;\" ><input name=\"blau\" type=\"number\" min=\"0\" max=\"255\" step=\"1\" value=\"80\"></a><a style=\"width:27%;\"> </a>";
  sHTML+= "</p2>";
  sHTML+= "<p><a style=\"width:38%;\"></a> <a style=\"width:20%;\">         </a>   <label style=\"width:15%;\" ><input type=\"submit\" value=\"senden\"></label><a style=\"width:27%;\"></a></p>";
  sHTML+= "</form>";

  sHTML+= "<form><p2><a style=\"width:28%;\"></a> <a style=\"width:30%;color: blue\">analoger Schwellwert</a> <a style=\"width:15%;\" ><input name=\"schwell\" type=\"number\" min=\"0\" max=\"1024\" step=\"10\" value=\"300\"></a><a style=\"width:27%;\"> </a></p2>";
  sHTML+= "<p><a style=\"width:28%;\"></a> <a style=\"width:30%;\">         </a>   <label style=\"width:15%;\" ><input type=\"submit\" value=\"senden\"></label><a style=\"width:27%;\"></a></p>";
  sHTML+= "</form>";

  sHTML+="<p><a style=\"width:20%;\"></a> <a style=\"width:38%;\">Analoger Wert 1:  </a><p3 id=\"an1\"; style=\"width:22%;\">Messwert 1 </p3><a style=\"width:20%;\"></a></p>";
  sHTML+="<p><a style=\"width:20%;\"></a> <a style=\"width:38%;\">Analoger Wert 2:  </a><p3 id=\"an2\"; style=\"width:22%;\">Messwert 2 </p3><a style=\"width:20%;\"></a></p>";
  sHTML+="<p><a style=\"width:20%;\"></a> <a style=\"width:38%;\">Digitaler Zustand:</a><p3 id=\"dig\"; style=\"width:22%;\">Digitaler Zustand</p3><a style=\"width:20%;\"></a></p>";

  sHTML += "<script>";
    sHTML += "setInterval(updateDiv, 2000);";
    sHTML += "function updateDiv () { ";
    sHTML += "document.getElementById(\"an1\").innerHTML = \""; //setText
    sHTML += analog1;
    sHTML += "\"; ";
    sHTML += "document.getElementById(\"an2\").innerHTML = \"";  
    sHTML += analog2;
    sHTML += "\"; ";
    sHTML += "document.getElementById(\"dig\").innerHTML = \""; 
    sHTML += DigiOut;
    sHTML += "\"; ";
    sHTML += "}";
  sHTML += "</script>";
sHTML+= "</body>";
sHTML+= "</html>";
return sHTML;
}

这是我的循环：

void loop() {
  if (millis() - startTime >= 2000) {
    startTime = millis();
    /* Check if a client has connected */
    client = server.available();
    if (!client){
      return;
    }

   /*Wait for the client to send data */
    Serial.println("neuer Client verbunden------------------------------");
    /*Count requests: */
    request_counter ++;
    unsigned long clTimeout = millis()+250;
    while(!client.available() && (millis()<clTimeout) ){
      delay(1);
    }

  /***  publish Homepage ***/
    client.print(html_document());
  //  client.print(stHTML());

  /* Read the first line of the clients request string "sHTML" until carriage return \r */
    sHTMLRequest = client.readStringUntil('\r');
      #ifdef DEBUGMODE
        Serial.println("Antwort: ");
        Serial.println(sHTMLRequest);
      #endif
    client.flush();
   /* stop client, if request is empty */
    if(sHTMLRequest==""){
      Serial.println("Leere Anfrage! - client gestoppt");
      client.stop();
      return;
      }
        #ifdef DEBUGMODE
          Serial.println("Antwort2: ");
          Serial.println(sHTMLRequest);
          Serial.println ("---------");
          Serial.print("DEBUG: Remote IP - Address : ");
          for (int i = 0; i < 3; i++) {
            Serial.print( client.remoteIP()[i]);
            Serial.print(".");
            }
          Serial.println(client.remoteIP()[3]);
          Serial.print("Seitenaufrufe: ");
          Serial.println(request_counter);
          Serial.println ("---------");
        #endif
  /**** call event handler **********/
    eventHandler();
      #ifdef DEBUGMODE
        Serial.println("Zugewiesene PWM-Werte");
        Serial.print("rot: ");
        Serial.println(rot);
        Serial.print("gruen: ");
        Serial.println(gruen);
        Serial.print("blau: ");
        Serial.println(blau);
      #endif
  /* write PWM values for colors to channels*/
  ledcWrite(1, rot);
  ledcWrite(2, gruen);
  ledcWrite(3, blau);
  Serial.println(analog1);
  }

MESShandler();
}

此方法从引脚读取值：

void MESShandler(){
  analog1 = analogRead(pinAnalog1);
  analog2 = analogRead(pinAnalog2);
  DigiOut = digitalRead(5);
}

这是浏览器的全部（！）输出（因为它是来自字符串的 HTML，所以没有换行符......）。

<!doctype html><html><html lang="de"><head><link rel="icon" href="data:;base64,iVBORw0KGgo="> <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>LetsgoING IoT</title><style>h1{display: flex; flex-flow: row wrap; justify-content: center;} </style><style>h1{ color: green;}</style><style>h2{display: flex; flex-flow: row wrap; justify-content: center;} </style><style>h2{ color: blue;}</style><style>h5{display: flex; flex-flow: row wrap; justify-content: center;} </style><style>p{display: flex; flex-flow: row wrap; justify-content: center; margin-bottom: 3%;} </style><style>p1{display: flex; flex-flow: row wrap; justify-content: center; margin-bottom: 0%;} </style><style>p2{display: flex; flex-flow: row wrap; justify-content: center; margin-bottom: 0%;} </style></head><body><h1>LetsgoING</h1><h2>Internet der Dinge</h2><p1><a style="width:38%;"></a><a style="width:20%;color: green">LED ein</a> <a style="width:15%;" href="LEDON"><button> EIN </button></a> </a><a style="width:27%;"> </a></p1><p><a style="width:38%;"></a><a style="width:20%;color: red"  >LED aus</a> <a style="width:15%"; href="LEDOFF"><button>AUS</button></a><a style="width:27%;"> </a></p><h5>RGB-LED PWM-Werte</h5><form><p2><a style="width:38%;"></a> <a style="width:20%;color: red"> Rot</a>  <a style="width:15%;" ><input name="rot" type="number" min="0" max="255" step="1" value="80" ></a><a style="width:27%;"> </a><a style="width:38%;"></a> <a style="width:20%;color: green">Grün</a><a style="width:15%;" ><input name="gruen" type="number" min="0" max="255" step="1" value="80"></a><a style="width:27%;"> </a><a style="width:38%;"></a> <a style="width:20%;color: blue">Blau</a> <a style="width:15%;" ><input name="blau" type="number" min="0" max="255" step="1" value="80"></a><a style="width:27%;"> </a></p2><p><a style="width:38%;"></a> <a style="width:20%;">         </a>   <label style="width:15%;" ><input type="submit" value="senden"></label><a style="width:27%;"></a></p></form><form><p2><a style="width:28%;"></a> <a style="width:30%;color: blue">analoger Schwellwert</a> <a style="width:15%;" ><input name="schwell" type="number" min="0" max="1024" step="10" value="300"></a><a style="width:27%;"> </a></p2><p><a style="width:28%;"></a> <a style="width:30%;">         </a>   <label style="width:15%;" ><input type="submit" value="senden"></label><a style="width:27%;"></a></p></form><p><a style="width:20%;"></a> <a style="width:38%;">Analoger Wert 1:  </a><p3 id="an1"; style="width:22%;">Messwert 1 </p3><a style="width:20%;"></a></p><p><a style="width:20%;"></a> <a style="width:38%;">Analoger Wert 2:  </a><p3 id="an2"; style="width:22%;">Messwert 2 </p3><a style="width:20%;"></a></p><p><a style="width:20%;"></a> <a style="width:38%;">Digitaler Zustand:</a><p3 id="dig"; style="width:22%;">Digitaler Zustand</p3><a style="width:20%;"></a></p><script>setInterva
4

0 回答 0