如何在 iframe 或 localhost 中显示用户提交网站的预览？答案

【问题标题】：How to show a preview of user submitted website in an iframe or localhost?如何在 iframe 或 localhost 中显示用户提交网站的预览？
【发布时间】：2019-06-12 17:36:38
【问题描述】：

我一直试图弄清楚如何在我的 Django 网站上显示用户提交的代码（html、css、javascript）。我可以让一个单页应用程序很好地显示在 iframe 中，例如一个链接 css 和 javascript 文件的 html 文件。

当用户有多个 html 页面并希望在它们之间进行链接时，就会出现问题。我还没有弄清楚如何在 iframe 中允许多个用户提交的 html 页面。是否可以使用 iframe 链接到另一个 html 页面？我可以在我的 Django 应用程序上设置一个 localhost 环境来运行用户的网站（类似于 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 等）

我怎样才能让它工作？

【问题讨论】：

iframe 就像浏览器窗口一样工作。如果您单击 iframe 中的链接，则链接将在 iframe 中打开，除非链接的目标属性另有指定。您尝试过什么，到底是什么问题？
刚刚用一个例子更新了问题
嘿，你找到方法了吗？如果有，可以分享一下吗？

标签： javascript html django iframe localhost

【解决方案1】：

我假设您有几组 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")'>

【讨论】：