Как отобразить предварительный просмотр представленного пользователем веб-сайта в iframe или localhost? - PullRequest
Новая
       16

Как отобразить предварительный просмотр представленного пользователем веб-сайта в iframe или localhost?

0 голосов
/ 12 июня 2019

Я пытался выяснить, как отобразить код, отправленный пользователем (html, css, javascript) на моем сайте Django.Я могу получить одностраничное приложение, которое будет отображаться в iframe просто отлично, например, один html-файл со связанными css и javascript-файлами.

Проблема возникает, когда пользователь имеет несколько html-страниц и хочет установить связь между ними.,Я не понял, как разрешить несколько пользовательских HTML-страниц в пределах iframe.Можно ли сделать ссылку на другую HTML-страницу с помощью iframe?Могу ли я настроить среду localhost в своем приложении Django для запуска веб-сайта пользователя (аналогично тому, что делает CodeAcademy)?

Я попытался записать код пользователя в iframe, который отлично работает для одного HTML-документа. 

let html = "<html><body>My HTML</body></html>";
let doc = document.getElementById('iframe').contentWindow.document;
doc.open();
doc.write(html);
doc.close();

Я пытаюсь записать несколько страниц html в iframe или настроить среду localhost, чтобы разрешить переход между страницами (index.html, about.html, profile.html и т. Д.)

Как я могу заставить это работать?

1 Ответ

0 голосов
/ 12 июня 2019

Я предполагаю, что у вас есть несколько наборов строк HTML (для каждой страницы). 

var pages = {
    home: "<html><body>My Home page. <a href='parent.loadPage(\'about\')'>about me</a></body></html>",
    about: "<html><body>My About page. <a href='parent.loadPage(\'Home\')'>Home</a></body></html>"
};

Тогда у вас будет функция, которая загружает код в ваш iframe 

function loadPage(page){
    let doc = document.getElementById('iframe').contentWindow.document;
    doc.open();
    doc.write(pages[page]);
    doc.close();
}

Затем вы вызываете функцию для загрузки домашней страницы ... 

loadPage(page);

... и настраиваете любые ссылки для вызова этой функции. 

<a href='parent.loadPage("about")'>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...