未捕获的ReferenceError:未定义X.

Question

此代码用于Chrome扩展程序.当我调用"showOrHideYT()"函数时,我得到一个"Uncaught ReferenceError:showOrHideYT未定义|(匿名函数)| onclick".

此代码将在页面中搜索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);

                }
            }
    });  

});

Answer 1

使用setAttribute字符串时,事件将在页面上下文中执行.内容脚本中定义的函数在沙盒范围内执行.因此,您必须传递函数引用,而不是字符串:

更换:

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

附:

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

代码说明:

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