码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-09-08 23:11:58      阅读:297      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html>

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

<body>
    <!--简单的代码演示效果器  -->
    <textarea id="J_textarea"></textarea>
    <button id="submitVale">提交</button>
    <div id="J_iframewapper"></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演示效果

标签:

原文地址:http://www.cnblogs.com/superZz/p/5854696.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!