Почему мой iframe обрабатывает html контент как текст

Question

Почему iframe рассматривает мое html содержимое как текстовое содержимое.

Вопрос: Я хочу отобразить целое html с его тегами, а не как текст.

На рисунке ниже показана моя проблема:

Мой код:

$('#resultBtn').off('click');
 $('#resultBtn').on('click',function(){
 
 var html = '<p id="pclick">Click me to see Alert</p>'
  var javascript = `document.querySelector('#pclick').on('click',function(){
     alert('clicked me');
 })`;
  var bodyContent = html +`<script>${javascript}<\/script>`;


$("#result_iframe").contents().find("body").html(`${bodyContent}`);

});

#result_iframe{
   width: 400px;
   height: 200px;
   background:#eaeaed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <button id="resultBtn">see Result</button>


<iframe id="result_iframe" frameborder="0"></iframe>

Answer 1

Я не эксперт, но я понимаю, что вы не можете передать JS в тексте после прочтения документа.
В редакторе здесь это не работает, я не знаю почему, но в тестовом файле это сработало.
Попробуйте это (JS en parent).

  <button id="resultBtn">see Result</button>
   <iframe id="result_iframe" frameborder="0"></iframe>
   <script>
     var button = document.getElementById("resultBtn");
     var iframe = document.getElementById("result_iframe");

     button.onclick = function(){
       iframe.contentDocument.body.innerHTML = "<p onclick='window.parent.showAlert()'>Click Me</p>"
     }
     function showAlert(){
       alert("Hi");
     }
   </script>

Answer 2

Этот код пытается добавить HTML содержимое к iframe:

$("#result_iframe").contents().find("body").html(`${bodyContent}`);

Однако добавление текстовых узлов или HTML элементов к iframe не поддерживается. Из HTML5 spe c для iframe :

4.8.5 Элемент iframe

Модель содержимого:
Ничего

И вот что Ничего означает в этом контексте:

Когда модель содержимого элемента является ничем, элемент не должен содержать текстовых узлов (кроме межэлементных). пробелы) и отсутствие узлов элементов.

Учитывая, что добавление содержимого в iframe не поддерживается, вероятно, будет хорошей идеей использовать другой метод.

Answer 3

Семед, у тебя коды работают нормально. Убедитесь, что ваш скрипт был написан после jquery insert.

$('#resultBtn').off('click');
$('#resultBtn').on('click',function(){
  var html = '<p id="pclick">Click me to see Alert</p>'
  var javascript = `document.querySelector('#pclick').on('click',function(){
alert('clicked me');
})`;
  var bodyContent = html +`<script>${javascript}<\/script>`;


  $("#result_iframe").contents().find("body").html(`${bodyContent}`);
});