获取更多信息,可以康康我的博客,所有文章会在博客上先发布随记 – 记载指间流逝的美好 (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>
展示图