时间戳

首页 > 解决方案 > 如何在 iframe 或 localhost 中显示用户提交网站的预览？

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

问题描述

我一直在试图弄清楚如何在我的 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 等）

我怎样才能让它工作？

标签： javascripthtmldjangoiframelocalhost

解决方案

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

推荐阅读