Bookmarklet意外地在点击时打开新页面

时间:2010-12-02 22:48:39

标签: javascript onclick bookmarklet

所以我创建了一个书签来折叠表中的每一行,除了第一行,然后让第一行切换/显示表的其余部分:

javascript:(function(){

function open(tableid){
    console.log('open');
    for (j=1;j<table[tableid].rows.length;j++){
        if(table[tableid].rows[j].style.display == 'none' ){
         table[tableid].rows[j].style.display = '';
         } else if(table[tableid].rows[j].style.display == ''){
         table[tableid].rows[j].style.display = 'none';
         }
    }
}
var table = document.getElementsByTagName("table");
for (i=0;i<table.length;i++){
 for (j=0;j<table[i].rows.length;j++){
  if( j != 0){
   table[i].rows[j].style.display = 'none';

   }
   if( j == 0){
    table[i].rows[j].onclick = new Function("open("+i+")");
   }  
  }
 }
})();

我在firebug的控制台中没有javascript :( function(){}()运行它,并且它工作正常。但是当我将它用作书签时,每次我点击第一行显示表,它只是打开一个新页面'0'(即website.com/0)

1 个答案:

答案 0 :(得分:2)

Function构造函数创建一个全局函数,而不是在函数中的词法。因此,它无法访问名为open的本地函数,因此它使用窗口的open方法。

从我的测试中,您的代码应始终引用全局open方法,无论是从书签还是页面本身运行。

看看这个例子:

(function(){
  function giveme5(x) { return 5;}

  var func = new Function("return giveme5()");
  // should output 5, but we get an error, giveme5 is not defined
  console.log( func() );
})()

这是您问题的可能解决方案

(function(){
    // Binds an argument to a method, this could be much better, but serves our 
    // purpose here
    function bindArg(fun, arg) {
        return function() {
            fun.call(this, arg);
        }
    }

    function toggleTable(table) {
        var rows = table.rows;
         for (var j=1; j<rows.length; j++){
             if(rows[j].style.display == 'none' ){
                 rows[j].style.display = '';
             } else if(rows[j].style.display == ''){
                 rows[j].style.display = 'none';
             }
         }
    }

    var tableList = document.getElementsByTagName("table");
    for ( var i=0; i<tableList.length; i++){
        var table = tableList[i];
        for ( var j=0; j < table.rows.length;j++){
            if( j != 0){
                table.rows[j].style.display = 'none';
            } else {
                table.rows[j].onclick = bindArg(toggleTable, table);
            }
        }
    }
})();