• 博文中加入代码演示


    概述

    今天看博客无意中看到这篇:如何获取鼠标选中的字。觉得末尾的代码演示真的很赞。看了一个后台,发现实现竟然很简单。所以把实现原理记录在这里,供自己开发时参考,相信对其他人也有用。

    原理

    原理就是打开一个新页面,然后把代码写入新页面里面就行了。

    在博客首页的script里面加入如下函数:

    <script>
        function runCode(id) {
            obj = document.getElementById(id);
            var TestWin = open(''); //打开一个窗口并赋给变量TestWin。 
            TestWin.opener = null // 防止代码对论谈页面修改 
            TestWin.document.write(obj.value); //向这个打开的窗口中写入代码code,这样就实现了运行代码功能。 
            TestWin.document.close();
        }
    </script>
    

    在写的博文里面加入如下内容就完成了:

    <textarea id="text_test" rows="10" cols="100">
    //代码编辑区域
    </textarea>
    
    //运行代码按钮
    <input onclick="runCode('text_test')" value="运行测试一下" type="button">
    

    示例

    后记

    万恶的博客园为了防止js脚本注入,markdown编辑器的内容先转化为了字符串再转化为html的,这样就丢失了换行,所以上面的textarea里面的内容都没有换行。(害我找原因找了半天)(而且发布的时候,博客园还把script标签屏蔽了,我用转义字符才成功显示)

    所以实际上我改了一下runCode函数,代码如下:

    <script>
    //运行代码按钮
        function runCode(id) {
            var obj = document.getElementById(id);
            var objValue = obj.value.split(/s{2,}/).join(' 
     '); //加上换行符
            var TestWin = open(''); //打开一个窗口并赋给变量TestWin。 
            TestWin.opener = null // 防止代码对论谈页面修改 
            TestWin.document.write(objValue); //向这个打开的窗口中写入代码code,这样就实现了运行代码功能。 
            TestWin.document.close();
        }
    </script>
    
  • 相关阅读:
    四川省选2012 day1 喵星球上的点名 (后缀数组,并不是完全的正解)
    6.2.1 最短路
    5.3.3 敌兵布阵
    6.1.1 Constructing Roads
    6.2.4 Arbitrage
    6.1.6 Jungle Roads
    5.3.6 Cow Sorting (HDU 及 POJ)
    6.2.5 Trucking
    6.1.4 还是畅通工程
    6.1.3 畅通工程
  • 原文地址:https://www.cnblogs.com/yangzhou33/p/8435857.html
Copyright © 2020-2023  润新知