js实现代码类似w3School演示效果

<!DOCTYPE html>
<html>

<head>
    <title>代码演示</title>
    <meta charset="utf-8">
</head>

<body>
    <!--简单的代码演示效果器  -->
    <textarea ></textarea>
    <button >提交</button>
    <div ></div>
    <script type="text/javascript">
    var Jbtn = document.getElementById('submitVale');
    var ifwapper = document.getElementById('J_iframewapper');
    var otextAr = document.getElementById('J_textarea');
    Jbtn.addEventListener('click', function() {
        var text = otextAr.value;
        var _iframe = document.createElement("iframe");
        _iframe.setAttribute('id', 'iframer');
        ifwapper.innerHTML = '';
        ifwapper.appendChild(_iframe);

        var ifrw = (_iframe.contentWindow) ? _iframe.contentWindow : (_iframe.contentDocument.document) ? _iframe.contentDocument.document : _iframe.contentDocument;

        ifrw.document.open();
        ifrw.document.write(text);
        ifrw.document.close();
    }, false);
    </script>
</body>
</html>
js实现代码类似w3School演示效果

相关推荐
