获取更多信息，可以康康我的博客，所有文章会在博客上先发布随记 – 记载指间流逝的美好 (xiaoyustudent.github.io)

前语

新的一年还没过去，我又开始搞事情了，偶尔一次用到了在线修改网页代码的网站，顿时想到，能不能自己完成一个呢？（PS：横竖也没事干），然后又想着，能不能用在博客上呢，这样有些代码可以直接展示出来，多好，说干就干，让咱们康康怎样去完成一个在线修改代码的功能吧。（PS：有瑕疵，还在学习！勿喷！orz）

大致介绍

大概的主意便是经过iframe标签，让咱们自己输入的内容可以在iframe中显现出来，知识点如下，如果有其他问题，欢迎在下方评论区进行补充！

获取输入的内容
刺进到iframe中
怎样在博客中显现

当然也有未解决的问题：现在输入的js代码不能操作输入的html代码，查了许多文档，我会继续研究的，各位大佬如果有主意欢迎评论

页面建立

页面建立很简单，便是三个textarea块，加4个按钮，就直接上代码了

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>在线修改器</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.HTMLBtn').click(function () {
                $("#cssTextarea").fadeOut(function () {
                    $("#htmlTextarea").fadeIn();
                });
            })
            $('.CSSBtn').click(function () {
                $("#htmlTextarea").fadeOut(function () {
                    $("#cssTextarea").fadeIn();
                });
            })
        });
    </script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body,
        html {
            width: 100%;
            height: 100%;
        }
        .main {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            width: 100%;
            height: 100%;
        }
        .textarea-box {
            display: flex;
            flex-direction: column;
            width: calc(50% - 20px);
            padding: 10px;
            background: rgba(34, 85, 85, 0.067);
        }
        .textarea-function-box {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .textarea-function-left,.textarea-function-right {
            display: flex;
            flex-direction: row;
        }
        .textarea-function-left div,
        .textarea-function-right div {
            padding: 5px 10px;
            border: 1px solid rgb(9, 54, 99);
            border-radius: 3px;
            cursor: pointer;
        }
        .textarea-function-left div:not(:first-child) {
            margin-left: 10px;
        }
        #htmlTextarea,
        #cssTextarea {
            height: calc(100% - 30px);
            width: calc(100% - 20px);
            margin-top: 10px;
            padding: 10px;
            overflow-y: scroll;
            background: #fff;
        }
        .html-div {
            background-color: cadetblue;
            margin-top: 10px;
            flex: 1;
        }
        .iframe-box {
            width: 50%;
            flex: 1;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="textarea-box">
            <div class="textarea-function-box">
                <div class="textarea-function-left">
                    <div class="HTMLBtn">HTML</div>
                    <div class="CSSBtn">CSS</div>
                </div>
                <div class="textarea-function-right">
                    <input type="text" id="input_name">
                    <div class="run">运转</div>
                    <div class="download">保存</div>
                </div>
            </div>
            <textarea id="htmlTextarea" placeholder="请输入html代码"></textarea>
            <textarea id="cssTextarea" placeholder="请输入css代码" style="display: none;"></textarea>
        </div>
        <div class="iframe-box">
            <iframe style="height: 100%;width: 100%;" src="" frameborder="0"></iframe>
        </div>
    </div>
</body>
</html>

忽略我的样式，能用就行！！

运转代码

这儿是核心功能，应该怎样把代码运转出来呢，我这儿用的是iframe，经过获取iframe元素，然后把对应的代码刺进进去

$('.run').click(function () {
    var htmlTextarea = document.querySelector('#htmlTextarea').value;
    var cssTextarea = document.querySelector('#cssTextarea').value;
    htmlTextarea += '<style>' + cssTextarea + '</style>'
    // 获取html和css代码
    let frameWin, frameDoc, frameBody;
    frameWin = document.querySelector('iframe').contentWindow;
    frameDoc = frameWin.document;
    frameBody = frameDoc.body;
    // 获取iframe元素
    $(frameBody).html(htmlTextarea);
    // 运用jqury的html方法把代码刺进进去，这样可以直接履行
})

这样一个基本的在线代码修改网页就完成了，接下来，咱们看下怎样把这玩意给用在博客当中！

hexo设置

首先咱们需求创立一个文件夹，用来放置咱们写好的在线的html文件。在source文件夹下新建文件online，并且设置禁止烘托此文件夹，打开_config.yml文件，并设置以下

skip_render: online/*

页面设置

我现在想到的办法便是保存文件，然后在hexo里运用，增加以下代码

<div class="textarea-function-right">
    <input type="text" id="input_name">
    <div class="download">保存</div>
    <!-- .... -->
</div>

<script>
    function fake_click(obj) {
        var ev = document.createEvent("MouseEvents");
        ev.initMouseEvent(
            "click", true, false, window, 0, 0, 0, 0, 0
            , false, false, false, false, 0, null
        );
        obj.dispatchEvent(ev);
    }
    function export_raw(name, data) {
        var urlObject = window.URL || window.webkitURL || window;
        var export_blob = new Blob([data]);
        var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
        save_link.href = urlObject.createObjectURL(export_blob);
        save_link.download = name;
        fake_click(save_link);
    }
    $(document).ready(function () {
        $(".download").click(function () {
            let scriptStr = $('html').first().context.getElementsByTagName("script")[2].innerHTML
            var htmlTextarea = document.querySelector('#htmlTextarea').value != "" ? document.querySelector('#htmlTextarea').value : '""';
            var cssTextarea = document.querySelector('#cssTextarea').value != "" ? document.querySelector('#cssTextarea').value : '""';
            let htmlStr = $('html').first().context.getElementsByTagName("html")[0].innerHTML.replace(scriptStr, "").replace('<div class="download">保存</div>', "").replace('<input type="text" id="input_name">',"").replace("<script><\/script>", "<script>$(document).ready(function(){document.querySelector('#htmlTextarea').value = `" + htmlTextarea + "`;document.querySelector('#cssTextarea').value = `" + cssTextarea + "`;})<\/script>")
            let n = $('#input_name').val()!=""?$('#input_name').val():"text";
            export_raw(n+'.html', htmlStr);
        })
    })
</script>

可能许多同学会好奇为啥我这儿用的script标签框起来，咱们看下这个图片和这个代码

et scriptStr = $('html').first().context.getElementsByTagName("script")[2].innerHTML

很简单，咱们保存后的代码，是没有这一段js代码的，所以需求替换掉，而这儿一共有3个script块，最后一个，也便是下标为2的script块会被替换掉。同理，后面替换掉保存按钮，input输入框（输入框是输入文件名称的，默认名称是text）。

一起这儿把咱们输入的数据，经过js代码的方式加入进保存后的文件里，完成打开文件就能看到咱们写的代码。之后咱们把保存后的文件放在刚才咱们创立的online文件夹下

hexo里边运用

运用就很简单了，咱们经过iframe里边的src属性即可

<iframe src="/online/text.html" style="display:block;height:400px;width:100%;border:0.5px solid rgba(128,128,128,0.4);border-radius:8px;box-sizing:border-box;"></iframe>

我给我的博客加了个在线运行代码功能

前语

大致介绍

页面建立

运转代码

hexo设置

页面设置

hexo里边运用

展示图

作者信息

我给我的博客加了个在线运行代码功能

前语

大致介绍

页面建立

运转代码

hexo设置

页面设置

hexo里边运用

展示图

相关文章

程序员爱不释手的20款开发必备软件

MSE 费芮新金融行业标杆案例

💰 金石计划二期活动 开奖啦！

在jenkins中集成sonar进行代码审查，实现持续集成CI/CD

作者信息

💰 金石计划二期活动开奖啦！