Блог

Главная - Вопросы по программированию - Вставка переменной JS в строку html, созданную в другом контексте

Вставка переменной JS в строку html, созданную в другом контексте

#javascript #html

#javascript #HTML

Вопрос:

Я создал экземпляр (строку) html-документа, который будет открыт, когда пользователь нажмет кнопку. Но я также создаю переменную msg , в которую следует вставить. Моя проблема в том, что msg переменная не вставляется в document.getElementById("para").innerHTML = msg; . Я думаю, из-за другого контекста.

Как я могу вставить переменную в строку HtmlString?
Прямо сейчас я получаю сообщение: ?tempFile:13 Uncaught ReferenceError: msg is not defined 

  var msg = "message from outer space";
 alert(msg); // Alerts "message from outer space"
    
 var htmlString = `<!DOCTYPE html>
    <html>
    <head>
    <title></title>
       <script>
         alert(msg); // This gives error (undefined)
         document.getElementById("para").innerHTML = msg;
       </script>
    </head>
    
    <body>
       <p id="para"></p>
    </body>
    
    </html> `
    
    window.open().document.write(htmlString)

Комментарии:

1. msg -> '${msg}' , см. Литерал шаблона . Кроме того, ваш код не будет работать, поскольку вы помещаете script тег перед загрузкой dom, поэтому document.getElementById("para") он будет undefined . Просто поместите msg ее непосредственно внутри тега: <p id="para">${msg}</p>

2. Если msg она поступает из ненадежного источника (например, все, с чем пользователь может работать: ввод, база данных, URL и т. Д.), Вы обязательно должны ее закодировать, Иначе вы уязвимы для XSS.

Ответ №1:

Вы можете использовать интерполяцию строк: `${msg}` 

  var msg = "message from outer space";

 var htmlString = `<!DOCTYPE html>
    <html>
    <head>
    <title></title>       
    </head>
    
    <body>
       <p id="para"></p>

       <script>
         alert(${msg}); // This gives error (undefined)
         document.getElementById("para").innerHTML = '${msg}';
       </script>
    </body>
    
    </html> `

хотя, как упоминал Хао Ву, вы могли бы просто добавить сообщение между <p> тегами. Также лучше всего добавить скрипт в нижней части HTML-текста.

  var msg = "message from outer space";

 var htmlString = `<!DOCTYPE html>
    <html>
    <head>
    <title></title>       
    </head>    
    <body>
       <p id="para">${msg}</p>
    </body>
    
    </html> `