Uncaught 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.

Answer 2

Я вижу, что вы используете jQuery в своем коде. Я лично думаю, что если мы используем библиотеку, такую ​​как jQuery, то нам не следует смешивать нативный код javascript и код jQuery. Вы можете использовать jQuery bind для привязки функций, которые вы должны вызывать на dom ready. Читайте ниже, чтобы узнать больше.

Предположим, вы хотите вызвать функцию JavaScript при нажатии кнопки. Вот HTML-код для того же.

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

предположим, что "test" - это функция, которую нужно вызвать, вот код для функции test.

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

Теперь вам нужно привязать функцию тестирования по нажатию кнопки.

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

});