2012-01-17 71 views
3

此代码正在Chrome扩展上使用。 当我调用“showOrHideYT()”函数时,我得到一个“Uncaught ReferenceError:showOrHideYT is not defined |(anonymous function)| onclick”。未捕获的ReferenceError:X未定义

此代码将搜索页面中的YouTube链接,它会在链接旁边添加一个按钮(它真的是一个事件的div),以显示带有嵌入视频的iframe,与Reddit Enhancement Suite非常相似。考虑到代码本身并不完整。我只想知道当我称之为“showOrHideYT(frameZES12345)”功能时我缺少什么。

如果需要,我可以提供manifest.json。

感谢

function showOrHideYT(id) 
{ 
    var YTvidWidth = 420; 
    var YTvidHeight = 315; 
    frameYT=getElementById(id); 
    console.log(frameYT.style.visibility); 
    if (frameYT.style.visibility == "hidden") 
     { 
     frameYT.style.width = YTvidWidth+"px"; 
     frameYT.style.height = YTvidHeight+"px"; 
     frameYT.style.visibility = "visible"; 
     } 
    if (frameYT.style.visibility == "visible") 
     { 
     frameYT.style.width = "0px"; 
     frameYT.style.height = "0px"; 
     frameYT.style.visibility = "hidden"; 
     } 
}; 


// DOM utility functions 
function insertAfter(referenceNode, newNode) { 
    if ((typeof(referenceNode) == 'undefined') || (referenceNode == null)) { 
     console.log(arguments.callee.caller); 
    } else if ((typeof(referenceNode.parentNode) != 'undefined') && (typeof(referenceNode.nextSibling) != 'undefined')) { 
     if (referenceNode.parentNode == null) { 
      console.log(arguments.callee.caller); 
     } else { 
      referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); 
     } 
    } 
}; 
function createElementWithID(elementType, id, classname) { 
    obj = document.createElement(elementType); 
    if (id != null) { 
     obj.setAttribute('id', id); 
    } 
    if ((typeof(classname) != 'undefined') && (classname != '')) { 
     obj.setAttribute('class', classname); 
    } 
    return obj; 
}; 
/////////////////////////////////////// 



$(document).ready(function() { 


    var vidWidth = 420; 
    var vidHeight = 315; 
    var linksSemID = document.getElementsByTagName("a") ; 

    for (var i = 0; i < linksSemID.length; i++){ 
     if (/id=$/.test(linksSemID[i].href)) links[i].href += "1"; 
    } 

    i=0; 
    var youTubeRegExp = /(?:v=)([\w\-]+)/g;     
    var forEach = Array.prototype.forEach;     
    var linkArray = document.getElementsByTagName('a');  

    forEach.call(linkArray, function(link){     
     linkArray.id="zes" + i++;       

     var linkTarget = link.getAttribute('href');   
     if (linkTarget!=null)        
      { 
      if (linkTarget.search(youTubeRegExp) !=-1)  
       { 

       console.log (linkTarget); 
       idVideo=linkTarget.match(/(?:v=)([\w\-]+)/g); 
       //idVideo = idVideo.replace("v=", "");  

       //add buton 
       botaoMais = document.createElement('DIV'); 
       botaoMais.setAttribute('class','expando-button collapsed video'); 
       botaoMais.setAttribute('onclick','showOrHideYT(frameZES'+ i +')'); 
       insertAfter(link, botaoMais); 



       //add iframe 
       ifrm = document.createElement('IFRAME'); 
       ifrm.setAttribute('src', 'http://www.youtube.com/embed/'+ idVideo); 
       ifrm.style.width = '0px'; 
       ifrm.style.height = '0px'; 
       ifrm.style.frameborder='0px'; 
       ifrm.style.visibility = 'hidden'; 
       ifrm.setAttribute('id', 'frameZES' + i); 
       insertAfter(link, ifrm); 

       } 
      } 
    }); 

}); 

回答

5

当您使用setAttribute一个字符串,该事件会在页面的上下文中执行。在内容脚本中定义的功能在沙盒范围内执行。所以,你必须通过的,而不是一个字符串的函数参考,:

替换:

botaoMais.setAttribute('onclick','showOrHideYT(frameZES'+ i +')'); 

有了:

botaoMais.addEventListener('click', (function(i) { 
     return function() { 
      showOrHideYT("frameZES"+ i); 
     }; 
    })(i)); 

的代码说明:

  • (function(i) { ..})(i)使用为每个事件保留i的值。
  • 在这个自调用函数中,返回另一个函数,用作click的事件监听器。
+1

另外,即使您想将该事件作为字符串使用,也必须引用'frameZES'。否则,引擎会查找一个名为“frameZES”的变量,然后将其值与“i”连接起来。 – 2012-01-17 11:41:41

+1

感谢Rob W,解决了我的问题。对你的建议只是一个小小的错字:换一个{,来自第一行的{,最后一个字符;) – RSilva 2012-01-17 11:46:25

1

我看到你在代码中使用jQuery。我个人认为,如果我们使用像jQuery这样的库,那么我们不应该混合原生JavaScript代码和jQuery代码。 您可以使用jQuery绑定绑定您需要在dom就绪时调用的函数。 阅读下面了解更多信息。

假设你想调用一个按钮单击的JavaScript函数,下面是HTML的相同。

<div id="clickme"> 
    <input id= "clickmebutton" type="button" value = "clickme" /> 
</div> 

假设“测试”是你需要调用的函数,这里是测试函数的代码。

function test() { 
    alert("hello"); 
} 

您现在需要绑定按钮单击上的测试功能。

$(document).ready(function() { 
    $("#clickmebutton").bind("click", function(){ 
     // do what ever you want to do here 
     test(); 
    }); 

}); 
相关问题