Tag Archives: JavaScript

滔滔的未公开 js api

今天叽歪也挂了。好像像样的独立微博已经全没了。

腾讯的滔滔还活着,不知道能不能保持下去。今天去挖了一下它的 API ,因为腾讯是没开放 API 的习惯的。

地址:

http://www.taotao.com/cgi-bin/msgj?qq=QQ号&num=10&t=0

调用例子:

     
     

    其实看看那个 api 的输出就知道怎么用了。

    不过滔滔确实不如另几个。界面不好看,浏览器兼容不好,也不公开api。

    Firefox 的 .submit() 问题

    碰到一个很郁闷的问题。一个在 iframe 里调用父页面的 js 来提交表单,在其他浏览器都正常,但 firefox 上却提交不了。在 firebug 里直接调用可以,在父页面上用 js 调用也行。也许是 firefox 的防 csrf 功能的影响吧。

    重现代码:

    test1.php

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <title>test1</title>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    </head>
    <body>
    <script type=”text/javascript”>
    <!–
    function foo() {
    alert(‘foo’);
    document.testForm.btn.value=’aaaa’;
    document.testForm.submit();
    }
    //–>
    </script>
    <form method=”post” action=”test2.php” name=”testForm” target=”ifr”>
    <input type=”submit” name=’btn’/>
    </form>
    <iframe src=” name=”ifr” id=”ifr”></iframe>
    </body>
    </html>

    test2.php

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <title>test2</title>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
    </head>
    <body>
    <?php
    print_r($_POST);
    ?>
    <script type=”text/javascript”>
    <!–
    <?php if (isset($_POST[‘btn’])):?>
    alert(‘111’);
    parent.foo();
    <?php else: ?>
    alert(‘000’);
    <?php endif; ?>
    //–>
    </script>
    </body>
    </html>

    可以试试看在不同浏览器上的差异。

    把 .submit() 换成 submit 控件的 .click() 也是一样。

    最后还是用setTimeout(…., 1); 跳出调用栈来执行 .submit() 来解决。

    Chrome 的数组遍历顺序问题

    昨天发现 Chrome 在遍历一个键名为数字形式的字符串的对象时,并不是像其他浏览器一样按定义的顺序。

      

    比如这个代码,在其他浏览器里都是31524,在 Chrome 里却是 12345 。当然 Chrome 也不是就把它们排序了,试试其他的数字,比如 {‘7553′:1,’5441′:2,’77335′:3,’222′:4,’1114’:5} 。

    去看了一下 ECMAScript 草案,倒也没规定对象属性的遍历的顺序什么的。所以在遍历对象的时候最好不要依赖于属性的特定顺序。

     

     

    叽歪未公开api

    叽歪提供了一套API接口供其他网站使用。不过他公布的API里的json接口 只有直接输出的。因为javascript的跨越问题,就只能通过代理来读取。不过既然叽歪给blog的javascript能读取,那一定还是有途径 的。看了下它输出的代码,就找到了一个未公开的参数:callback。这样就可以在js端动态获取最新的叽歪了。

    代码:

    <script type=”text/javascript”>
    <!–
    function jiwai_de_callback(status){
    var text=status[0].text;
    var m = text.match(/^(.+)\[[^]]+\]\s*$/);
    if(m){
    text = m[1];
    }
    alert(text);
    }
    //–>
    </script>
    <script type=”text/javascript” src=’http://api.jiwai.de/statuses/user_timeline/用户名.json?count=1& callback=jiwai_de_callback’></script>

    把用户名替换成你的用户名或id即可。

    用flash上传文件

      HTML提供了一个文件上传的控件,一般在web上上传文件全靠它。但是这玩意样式不好控制。在修改了文本框和按钮的样式后,这个文件域的样子就显得很突兀。虽然有一些结合CSS和JS的技巧可以模拟不同的样式,但是很麻烦,而且在浏览器兼容,以及稳定性方面都不太好。

      好在Flash8开始提供了文件上传下载的功能,还由于有了更方便地与javascript交互的能力,完全可以不用Flash做界面(这样在页面修改的时候比较麻烦),而是把那个flash隐藏掉,用javascript和html来控制显示。此外,用flash上传还有一个很大的好处是可以显示上传进度,让用户在等待的时候感觉舒服一点。不过这种方法也有缺点,比如不能读取从服务器返回的结果,也不能通过post捎带其他的参数。

      as和js代码都很简单,可以下载回去试试。

    让图片跳舞的js代码

    imgs=document.getElementsByTagName('img');
    for(i=0;i<imgs.length;i++){    
        imgs[i].display='block';
        imgs[i].style.position='absolute';
    }
    t=0;
    function foo(){   
        for(i=0;i<imgs.length;i++){        
            x=Math.sin((t+i*8)/180*Math.PI)*300+400;
            y=Math.cos((t+i*6)/180*Math.PI)*300+300;
            imgs[i].style.left=""+x+"px";
            imgs[i].style.top=""+y+"px";   
        }
        t+=1;
        setTimeout('foo()', 20);
    }
    foo();
    

    将以上代码用firebug之类的扩展运行一下,或者将如下代码复制到地址栏,就可以让网页上的图片动起来。

    javascript你可能不知道的4

    javascrip中可以用function来定义一个类

    function Base(){
        this.foo=function(){
            return ‘base’;
        }

    }

    那怎么实现类的继承呢?

    function Derive1(){
        this.foo=function(){
            return ‘derive’;
        }

    }

    Derive1.prototype=new Base();

    var obj1=new Derive1();

    alert(obj1.foo());

    还有另外一种方法:

    function Derive2(){
        this.parent=Base;
        this.parent();
        this.bar=function(){
            return ‘bar’;
            }

    }

    var obj2=new Derive2;

    alert(obj2.foo());
    用这种方法还能实现多继承。
    function Base2(){
        this.bar=function(){
            return ‘base2’;
        }
    }
    function Derive3(){
        this.base1=Base;
        this.base1();
        this.base2=Base2;
        this.Base2();
    }
    var obj3=new Derive3;
    alert(obj3.foo());
    alert(obj3.bar());