很久很久以前，有一个叫Array的魔王占领着javascript的数组宝座，垄断了一切形式的数组。它能屈能伸，功能齐全，也不挑食，什么类型的数据都吃。
直到有一天，ArrayBuffer家族踏上了这片土地，Array的安宁被打破了。
标签归档：js
视频手动载入js
俺花了好长时间，用我这不熟练的技术好不容易做了个带满缺点的js
那么这货的用处就是屏蔽掉flash这样的东西【当然如果修改一下js可以屏蔽掉body里的任何标签
先来个示例【有视频有真相
embed标签的例子（无视频源）video标签的例子(同上)
object标签的例子(同上)
其实屏蔽了以后看起来都是一样的。。
这货的功能：点击以后再载入，防止意外流量损失或带宽？占用
这就是个鲜明的例子http://blog.luojia.tk/?p=181
里面装满了视频，这样就可以解决打开这个网页一下载入很多视频的问题了
原理：让div插队再干掉背后的原标签并给这个div添加可以给自己内部写入被杀掉标签的事件↓
|
1 2 3 4 |
objarray[i].parentNode.insertBefore(tmpdiv,objarray[i]);//插队到原标签前面 objarray[i].parentNode.removeChild(objarray[i]);//干掉原标签 |
特点：插队的div使用源元素的宽高和定位【本来想把z-index也算进去的，时间不够就不做了↓
|
1 2 3 4 5 6 7 8 |
//一堆if用来判断是否有这些属性 if(getwidth(objarray[i])){tmpdiv.style.width=getwidth(objarray[i]);} if(getheight(objarray[i])){tmpdiv.style.height=getheight(objarray[i]);} if(getposition(objarray[i])){tmpdiv.style.position=getposition(objarray[i]);} if(getright(objarray[i])){tmpdiv.style.right=getright(objarray[i]);} if(getleft(objarray[i])){tmpdiv.style.left=getleft(objarray[i]);} |
全代码↓
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
var changevideos=function(){ var target=new Object; function findtag(tag) { return document.getElementsByTagName(tag); } function getwidth(obj){ if(obj.width){return obj.width;}else if(obj.style.width){return obj.style.width;}else{return false;} } function getheight(obj){ if(obj.height){return obj.height;}else if(obj.style.height){return obj.style.height;}else{return false;} } function getposition(obj){ return obj.style.position?obj.style.position:false; } function getright(obj){ return obj.style.right?obj.style.right: false; } function getleft(obj){ return obj.style.left?obj.style.left:false; } function changeinner(html){ target=event.srcElement?event.srcElement:event.target; target.innerHTML=html; } function run(objarray){ for (var i = 0; i < objarray.length; i++) { var aimhtml = objarray[i].outerHTML; var tmpdiv=document.createElement("div"); if(getwidth(objarray[i])){tmpdiv.style.width=getwidth(objarray[i]);} if(getheight(objarray[i])){tmpdiv.style.height=getheight(objarray[i]);} if(getposition(objarray[i])){tmpdiv.style.position=getposition(objarray[i]);} if(getright(objarray[i])){tmpdiv.style.right=getright(objarray[i]);} if(getleft(objarray[i])){tmpdiv.style.left=getleft(objarray[i]);} tmpdiv.innerHTML='<div class="hideitemzhanwei" style="width:'+getwidth(objarray[i])+'px;height:'+getheight(objarray[i])+'px;"><center><h2 style=\'color:#fff;\'>为了防止流量计费用户的流量损失<br>此处已被自动屏蔽</h2><span style="position:absolute;bottom:2px;right:2px;">点击恢复</span></center></div>';//填上填充显示的内容 //tmpdiv.style.overflow="hidden"; tmpdiv.setAttribute('onClick','changevideos.changeinner(\''+aimhtml+'\')'); tmpdiv.style.display="inline-block"; objarray[i].parentNode.insertBefore(tmpdiv,objarray[i]); objarray[i].parentNode.removeChild(objarray[i]); } } function changehideneededtag() { var tmpstyle=document.createElement("style"); tmpstyle.innerHTML=".hideitemzhanwei{position:relative;background-color:#66ccff;color:#fff;cursor:pointer;}"; document.getElementsByTagName("head")[0].appendChild(tmpstyle); var a; if(a=findtag("embed")){ run(a);} if(a=findtag("object")){ run(a);} if(a=findtag("video")){ run(a);} } changehideneededtag(); } changevideos.changeinner=function(html){ target=event.srcElement?event.srcElement:event.target; target.innerHTML=html; } |
没时间了所以还有些可能出错的地方没做错误处理，以后来补上
给wordpress加上了个代码显示函数
原理：文档加载完成以后运行相关函数修改所有code标签
首先要做一件事，把加载文章的php的一个函数修改一下，阻止其给code标签内自动把\n换行替换成<br>标签（这个问题苦了我好久吖╮(╯3╰)╭），函数名wpautop,此函数位于/wp-includes/formatting.php中,找到这个函数里的
|
1 |
$pee = preg_replace_callback('/<(script|style).*?<\/\\1>/s', '_autop_newline_preservation_helper', $pee); |
这一行，括号里加上|code,变成这样：
|
1 |
$pee = preg_replace_callback('/<(script|style|code).*?<\/\\1>/s', '_autop_newline_preservation_helper', $pee); |
【这要怎么理解呢。。应该就算是不进行修改的标签列表吧】
然后一切就都方便了，给onLoad加上自己的code处理函数。
以下是我的code处理函数：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
function tolist(string, width) { if (width == "") { width = "auto"; } var codelist = '<div style=\'background-color:#fff;overflow:hidden;width:' + width + ';max-width:' + width + ';word-wrap:break-word;word-break:break-all;word-wrap:break-all;display:block;margin:0px;font-family: "微软雅黑";\' ><div style="color:#CCCCCC;font-size:13px;background-color:#fff;width:100%;height:20px;font-weight:900;">Code:</div><ol style="margin:0px;background-color:#E7E7E7;border:1px solid #CCCCCC;padding-left:50px;color:#00CC33;">'; //string=string.replace(/&/g,"&"); string = string.replace(/</g, "<"); string = string.replace(/>/g, ">"); string = string.replace(/ /g, " "); string = string.replace(/\'/g, "'"); string = string.replace(/\"/g, """); string = string.replace(/<br\/>/g, '<span style="color:#999999;"><br/></span>'); for (var i = 0;; i++) { if (code[i] == "" || code[i] == " ") { code[i] = null; } else { break; } } for (var i = code.length; i > 0; i--) { if (code[i] == "" || code[i] == " ") { code[i] = null; } else { break; } } for (var i = 0; i < code.length; i++) { if (code[i] == null) {} else { codelist = codelist + '<li style="font-size:13px;"><div style="border-left:1px solid #999;display:block;margin-right:0px;background-color:#fff;width:auto;min-width:60px;position:relative;color:#000;">' + code[i] + ' </div></li>'; } } codelist = codelist + '</ol></div>'; return codelist; } function findcodetag() { return document.getElementsByTagName("code"); } function changecodetag() { var a = findcodetag(); for (var i = 0; i < a.length; i++) { var code = a[i].innerHTML; a[i].innerHTML = tolist(code); } } |
然后onLoad加上changecodetag()
暂时没做出高亮，而且还有些小小的问题。就先摆在这里了。
另外谁可以告诉我最后总有一个空行是肿么回事捏？
后期可能有改动，文章就不改了，详见源代码。
