Вложенные html-документы inline

Question

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

1. Я хочу, чтобы сократить число физических файлов я управления, поэтому iframes или частичные части рендеринга - это не то, что мне нужно, так как они требуют фактического отдельного документа для рендеринга.

2. Я хочу, чтобы показать пример некоторого html, а затем загрузить html-документ, показывающий, что это будет выглядеть в браузере прямо на этой же странице без использования изображений.

Я знаю, что это возможно, так как несколько интернет-HTML редакторы позволяют писать HTML, а затем генерировать HTML в сторону, и я полагаю, что это может быть просто обертоны, динамически переписать файл, который в частичные, но, конечно же, не все из них делают это, так есть ли способ, кроме использования iframes или partials для этого? Я использую asp.net mvc с C#.

Answer 1

Редакторы онлайн создают HTML, вводя ваш HTML-код в редакторе в виде дочерних элементов внутри другого контейнера, который должен выступать в качестве контейнера предварительного просмотра.

На стороне сервера нет активности, кроме как просто хранить фрагменты HTML (частичные файлы, хранящиеся в БД, если они предварительно загружены).

Это может быть сделано как чистая деятельность на стороне клиента. Конечно, вам придется написать собственный рендерер, который будет анализировать содержимое переданного пользователем кода, вычеркнуть тег HTML, загрузить скрипты и другие ссылки в теге head, установить заголовок, как указано в теге head и добавьте содержимое тега body в div презентации.

Но тогда это хлопот. Лучше хранить HTML в кеше DB/app и отображать его с помощью iframe, так что вам не нужно иметь дело с множеством партиций. Просто CRUD. /================================================================================================================ ================================= ОБНОВЛЕНИЕ: Ответ на разъяснение

Да, это возможно. Вставьте свой «inner-html» в качестве «строковой переменной шаблона javascript» в вашем документе «main-html». Некоторые вещи, как это:

<script type="text/javascript"> // <![CDATA[ 
      var innerhtml1 = ` 
          <div> 
           <p>This markup is part of innerhtml1</p> 
          </div> 
          `; 
      // ]]> 
    </script> 

(. Я не уверен, если вам действительно нужен раздел CDATA, если вы хотите использовать шаблон буквального вещь, хотя)

Тогда вы можете просто выполнить

$("#container1").html(innerhtml1);

на документе «основной HTML» и убедитесь, что вы просто не имеете HTML и тела тегов. Но достаточно разметки для того, что вы хотите показать (например, выше).

Если у вас действительно есть теги HTML и body.You должен найти способ просто вычеркнуть содержимое тега body исходной строки и вставить его в контейнер предварительного просмотра. Это должно быть легко передать строку через регулярное выражение и совка между элементами и тегами. Но я уверен, что вам это может не понадобиться.

Таким образом, вы можете фактически хранить тонны (шутки) HTML-документов на одной странице html.

Codepen Ссылка здесь:. http://codepen.io/anon/pen/dOJMwo?editors=1010#0

Остерегайся это работает только в браузерах, которые поддерживают шаблон буквальной вещь (Его довольно хорошо, как сейчас Смотрите здесь:. EcmaScript6 template strings support) В противном случае вы можете использовать стандартную строку, но вам нужно будет использовать экранирование и другую обработку, чтобы правильно форматировать его. Перед тем как иметь возможность напрямую вставлять его.