井井客

搜索

纯JS实现本页面预览执行代码的效果

原生JS,通过Blob构造函数来实现,在本页面内点击执行代码,弹出窗口中预览效果。因为看了大神的文章,所以自己手动实现了下。

纯JS实现本页面预览执行代码的效果

我的想法就是将css,html,js分开在三个textarea中,使用默认的值,点击按钮预览。或者在文本域中输入自己的代码,也是可以预约效果的。

效果图就像上面的图一样,预览、查看代码可以点击这里

        //定义对象
        var runingCode = {
            // 获取textarea节点数组
            arr:document.querySelectorAll('textarea'),
            // 点击运行按钮(入口)
            go:function(){
                var btn = document.querySelector('button');
                btn.addEventListener('click', this.reorganizeCode.bind(this), true)
            },
            // 将textarea中的内容获取到并
            reorganizeCode:function(){
                // 获取css,html,js文本
                var styleCode = this.getEscaped('<style>' + this.arr[0].value + '</style>');
                var htmlCode = this.getEscaped(this.arr[1].value);
                var jsCode = this.getEscaped('<script>' + this.arr[2].value + '</script>');
                // 创建blob
                var blob = new Blob([styleCode, htmlCode, jsCode], {
                    'type': 'text/html'
                })
                // 创建框架
                var iframe = document.createElement('iframe');
                iframe.src = URL.createObjectURL(blob);
                // 创建框架外层并监听click-用于删除DOM
                var warp = document.createElement('div');
                warp.addEventListener('click',function(){
                    document.body.removeChild(warp)
                })
                warp.setAttribute('class', 'iframeWarp');
                // 添加到DOM
                warp.appendChild(iframe)
                document.body.appendChild(warp)
            },
            //将可能出现的转义字符还原为html代码
            getEscaped:function(str){
                var escapedWords = {lt: '<', gt: '>', nbsp: ' ', amp: '&', quot: '"'};
                return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function(all, t) {
                    return escapedWords[t]
                })
            }
        }
        //开始执行
        runingCode.go();

Js部分的代码就是这样子,没有考虑兼容(blob兼容略低)。里面的注释我自己感觉也满多的,难点不多。就是需要注意一下new Blob的第一个参数是需要传数组(不论几个值),第二个参数就是数据的格式,正常的html代码就是"text/html",如果第一个数组参数中的传的是JSON字符串的话则需要使用“application/json”。

然后是创建iframe,而src就是使用URL.createObjectURL静态方法将blob转为DOMstring。

最后就是关于转义字符,因为页面中可能出现像尖括号这类用转义字符显示的情况,所以在获取文本域值的同时将它转为正常的html代码。

文章内容只有这么多了,如果您觉得不好的地方欢迎拍砖~~

文章TAG:JS

作者:井井客原创来源:原创
本文标题:纯JS实现本页面预览执行代码的效果
本文链接:http://www.jingjingke.com/c/06299.html

上一篇:CSS3+JQ完成元素进场动画效果
下一篇:自制canvas压缩图片对比效果

文章分类

相关阅读

随便看看