标签归档：js

demo、javascript、jquery、无聊产物

视频手动载入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='&lt;div class="hideitemzhanwei" style="width:'+getwidth(objarray[i])+'px;height:'+getheight(objarray[i])+'px;">&lt;center>&lt;h2 style=\'color:#fff;\'>为了防止流量计费用户的流量损失&lt;br>此处已被自动屏蔽&lt;/h2>&lt;span style="position:absolute;bottom:2px;right:2px;">点击恢复&lt;/span>&lt;/center>&lt;/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;
}
 

没时间了所以还有些可能出错的地方没做错误处理，以后来补上

html、javascript、神奇的问题

给wordpress加上了个代码显示函数

留下评论

原理：文档加载完成以后运行相关函数修改所有code标签

首先要做一件事，把加载文章的php的一个函数修改一下，阻止其给code标签内自动把\n换行替换成<br>标签（这个问题苦了我好久吖╮(╯3╰)╭），函数名wpautop,此函数位于/wp-includes/formatting.php中,找到这个函数里的
$pee = preg_replace_callback('/&lt;(script|style).*?&lt;\/\\1&gt;/s', '_autop_newline_preservation_helper', $pee);
这一行，括号里加上|code,变成这样：
$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
48
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,"&amp;");
    string  =  string.replace(/</g,  "&lt;");
    string  =  string.replace(/>/g,  "&gt;");
    string  =  string.replace(/ /g,  "$nbsp;");
    string  =  string.replace(/\'/g,  "&apos;");
    string  =  string.replace(/\"/g,  "&quot;");
    string  =  string.replace(/<br\/>/g,  '<span style="color:#999999;"><br/></span>');
    var code  =  string.split("\n");
    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()

暂时没做出高亮，而且还有些小小的问题。就先摆在这里了。
另外谁可以告诉我最后总有一个空行是肿么回事捏？
后期可能有改动，文章就不改了，详见源代码。