Попробуй свой собственный html с jquery

Question

Я пытаюсь попробовать себя как в w3school, и мне нужна помощь. это где я получаю до сих пор:

<input value="Update page" type="button"> 
    <textarea id="mycode"></textarea> 
    <iframe id="display"></iframe> 

another tryityourself: 

    <input value="Update page" type="button"> 
    <textarea id="mycode"></textarea> 
    <iframe id="display"></iframe> 

$(document).ready(function() { 
    $('input:button').on('click', function() { 
    var x = $(this).next().val(); 

frames['display'].document.documentElement.innerHTML = x; 
    }); 

}); 

but what i want is the html will show in the iframe near the closest textarea. 
i hope you understand what i mean. 
please help me. 

Answer 1

Вам нужно немного изменить структуру разметки и использовать jQuery для доступа к iFrame. Я взял ваш код и переработал его в функциональный пример. Обратите внимание на использование классов вместо ids.

Вы можете управлять содержимым в плавающем фрейме с помощью стандартного JQuery:

<div class="codeFrame"> 
    <input value="Update page" type="button"> 
    <textarea class="mycode"></textarea> 
    <iframe class="display"></iframe> 
</div> 

<div class="codeFrame"> 
    <input value="Update page" type="button"> 
    <textarea class="mycode"></textarea> 
    <iframe class="display"></iframe> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('input:button').on('click', function() { 
      var codeFrame = $(this).parent('.codeFrame'); 
      codeFrame.children('iframe').contents().find('body').html(codeFrame.children('textarea').val()); 
     }); 
    }); 
</script> 

Answer 2

В HTML id должен быть уникальным . У вас не может быть нескольких элементов с одинаковым идентификатором, что вы делаете с несколькими фреймами. Вы должны дать каждому iframe уникальный идентификатор и указать соответствующий в своем javascript.

Answer 3

Сверху моей головы есть один из двух способов справиться с этим. Первый заключается в том, чтобы взять ваш код в виде строки, закодировать его с помощью base64, а затем установить iframe src в «data: text/html, < base64 encoded html здесь >», и он должен работать. Вы можете узнать больше об этом методе здесь, Is it possible to "fake" the src attribute of an iframe?

Вариант второй состоит в том, чтобы опубликовать свой код на сервере, создать временный файл html с использованием php или некоторого языка на стороне сервера, вернуть идентификатор, а затем изменить src iframe к файлу php viewer с возвращенным идентификатором в конце, который отобразит html-файл, который он написал на сервер, а затем удалит его, только чтобы ваша файловая система была чистой.

Пример такой, ваш браузер делает запрос ajax для формирования post domain_a.com/postform.php, postform.php записывает содержимое html в 1.html и возвращает 1 на ваш javascript, а затем ваш javascript устанавливает src iframe в domain_a.com/viewhtml.php?id=1, где viewhtml.php откроет 1.html, прочитает его, отобразит его и затем удалит после него.