时间戳

首页 > 解决方案 > 编写“实时编码器”

javascript - 编写“实时编码器”

问题描述

我有一个问题，我正在像 CodePen、Trinket 这样的网站上工作，您可以在其中编写代码并在之后保存它我基本上完成了，但我不知道如何编写一个保存“文件”的系统，这里有一些代码：

        function showPreview() {
        var htmlcode = document.getElementById("htmlcode").value;
        var csscode = "<style>"+document.getElementById("csscode").value+"</style>";
        var jscode = "<scri"+"pt>"+document.getElementById("jscode").value+"</scri"+"pt>";
        var frame = document.getElementById("preview_window").contentWindow.document;
        frame.open();
        frame.write(htmlcode+csscode+jscode);
        frame.close();
     
    }
       <div class="code_area">
        <textarea id="htmlcode" placeholder="HTML CODE" oninput="showPreview()"></textarea>
        <textarea id="csscode" placeholder="CSS CODE" oninput="showPreview()"></textarea>
        <textarea id="jscode" placeholder="JAVASCRIPT CODE" oninput="showPreview()"></textarea>
    </div>
    <div class="preview_area">
        <iframe id="preview_window"></iframe>
    </div>

-玫瑰

标签： javascripthtmlcss

解决方案

如果你想在客户端生成一个文件，你可以这样做

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/html;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

// download the file
download("hello.html","This is the content of the file");

推荐阅读