javascript - 单击书签时意外打开新页面

Question

因此，我制作了一个书签来折叠表格中的每一行(第一行除外)，然后使第一行切换/显示表格的其余部分:

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 )

Answer 1

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);
            }
        }
    }
})();