javascript - Chrome 拒绝在注入(inject)脚本中声明变量

Question

我有一个 Greasemonkey 脚本，它将 javascript 注入(inject)到页面中，该页面应该添加一个超链接，该超链接在单击时调用一个变量。该变量是隐藏链接并显示播放器的函数。但是，当我单击该链接时，页面错误日志显示未定义 playaudio。这是我的代码:

// ==UserScript==
// @name          AudioPlayer
// @include       http://mysite.com/*
// ==/UserScript==
function exec(fn) {
    var script = document.createElement('script');
    script.setAttribute("type", "application/javascript");
    script.textContent = '(' + fn.toString() + ')();';
    document.body.appendChild(script); // run the script
    //document.body.removeChild(script); // clean up
}
window.addEventListener("load", function () {
    exec(function () {
        jQuery(".field-name-field-mp3link").append('<audio controls="" autoplay="" style="margin-left:10px; display:none;" src=""></audio>');
        var playaudio = (function () {
            jQuery('.field-name-field-mp3link > audio').attr('src', jQuery('.field-name-field-mp3link > .field-items > .field-item > a').attr('href'));
            jQuery('.field-name-field-mp3link > audio').css('display', 'block');
            jQuery('.field-name-field-mp3link > a').css('display', 'none');
        });
        jQuery(".field-name-field-mp3link").append('<a href="javascript:playaudio();" style="margin-right:5px;">Listen</a>');
    });
}, false);

我应该补充一点，当我使用 chrome 的内置 Javascript 控制台运行代码时，它工作得很好。

Answer 1

从外观上看，您是在函数局部声明 playaudio，因此单击超链接 javascript:playaudio(); 将不起作用，因为 playaudio 不在全局范围内。

var playaudio = (function(){...});
jQuery(".field-name-field-mp3link").append('<span style="margin-right:5px;">Listen</span>');    
jQuery(".field-name-field-mp3link > span").click(playaudio);

编辑:如上所述，通过将 playaudio 保持在本地范围内并通过注入(inject)元素上的点击处理程序调用它，您可以避免污染文档的全局范围，尤其是，如果在您的脚本被注入(inject)之前，文档在窗口上已经有一个“playaudio”方法...