前端迷你网页编辑器只需要一小段代码浏览器秒变并实时预览

最新推荐文章于 2024-05-11 07:23:31 发布

okok地

最新推荐文章于 2024-05-11 07:23:31 发布

阅读量522

点赞数

分类专栏： discovery前端

本文链接：https://blog.csdn.net/weixin_43850444/article/details/91200313

版权

discovery前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近偶然在GitHub上发现的，直接放效果图↓
效果展示
将以下代码粘贴到浏览器地址栏中就可以实现了

data:text/html,
<body οninput="i.srcdoc=h.value+'<style>'+c.value+'</style>
<script>'+j.value+'</script>'">
<style>textarea,iframe{width:100%;height:50%}
body{margin:0}textarea{width:33.33%;font-size:18}
</style>
<textarea placeholder=HTML id=h></textarea><textarea placeholder=CSS id=c></textarea><textarea placeholder=JS id=j></textarea>
<iframe id=i>

概述

直接使用id操作dom获取代码输入值
用户输入时执行oninput里的代码块
利用iframe的srcdoc显示iframe中的html内容

原理

body上的oninput监听了页面所有的输入事件，即每次输入都执行里面代码块。三个textarea的值生成srcdoc内部页面的内容。

需要注意的是：

里面是直接使用id操作dom
代码块的标签属性省略了引号
浏览器会自动解析遗漏代码

所生成的html结构：

h.value
<style>c.value</style>
<script>j.value</script>

最后附上大神源码：umpox/TinyEditor

okok地

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端迷你网页编辑器只需要一小段代码浏览器秒变并实时预览

最近偶然在GitHub上发现的，直接放效果图↓将以下代码粘贴到浏览器地址栏中就可以实现了data:text/html,<body οninput="i.srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'"><style>te...
复制链接

扫一扫