在博客园中执行自己的脚本

在前面的一篇文章中《如何绕过博客园对 script 的屏蔽》，我看到了在页面执行自定义的脚本的希望，自己试验了一下，写了个简单的测试，如下：

<input id="btnTest" onclick="t1(22)" type="button" value="测试" />

脚本代码：

function t1(v)
{
   console.log("---------- t1执行日志 : "+v+" -----------");
}

发现不管把这个脚本代码放到什么地方，好像都执行不了啊！～好像不是这么回事啊，再次参考了文章，文章里面的思路是对的，可能不适合我，那我就找一个适合我的吧

主要解决几个问题

1.脚本放到页面的元素中，不能破坏脚本结构，不然注释、换行等就没有了，且不能影响代码执行（代码压缩后的票过啊）

2.使脚本不可见。

3.使用博客园自己有的页面元素，不自己造轮子。

有了上面的几条，在根据前面文章的思路，就有了：

 

 

 

第一步：让博客园可解析js的代码

首先使博客园能够解析我们的js代码，首先登录博客园，点击管理-->设置，如下界面：

在 “页脚Html代码” 中加入：

<!-- 运行页面上的自定义脚本 Star-->
<style type="text/css">textarea[title=js]{ display: none;}</style>
<script>
$(function(){
    $('textarea[title=js]').each(function(){window.eval($(this).text())});
    console.log("---[  页面自定义脚本初始化完成！  ]----");
});
</script>
<!-- 运行页面上的自定义脚本 End-->

 代码简单，你懂得，我就不说啥了，最后点击保存按钮。

  

第二步：编写js脚本并执行

在博客园的文章编辑界面，如下图选中的地方点击：

弹出HTML编译界面，如下图：

 添加一个textarea元素，并在元素中写我们自己的js脚本，如下：

<p><textarea title="js">
function t1(v)
{
  var dt=new Date();
  var str=dt.getHours()+":"+dt.getMinutes()+":"+dt.getSeconds();
  str="---------- ["+str+"] t1执行日志 : "+v+" -----------";
  console.log(str);
  $('#res').html(str);
}
</textarea></p>

那么我们再放一个button的按钮元素，看看执行自己的脚本效果：

<input id="btnTest" onclick="t1(111)" type="button" value="测  试 1" />
或者
<button onclick="t1(222)">测  试 2</button>

 

或者 测试4

 

为了测试效果，我自己在脚本代码中加点时间等其他元素进去，把自己的自定义代码放进去，打开页面的控制台，点击按钮测试 ----  Perfect！！！！

 

function t1(v) { var dt=new Date(); var str=dt.getHours()+":"+dt.getMinutes()+":"+dt.getSeconds(); str="---------- ["+str+"] t1执行日志 : "+v+" -----------"; console.log(str); $('#res').html(str); } document.getElementById("btnTest").onclick=()=>t1(444444) console.log("---[ 脚本已准备就绪！ ]----");