从带有扩展名的 html 页面的脚本中调用函数答案

【问题标题】：Call a function from within the script from the html page with an extension从带有扩展名的 html 页面的脚本中调用函数
【发布时间】：2013-05-12 07:45:34
【问题描述】：

我有一个脚本（对于这个问题：script.js），它被注入到每个页面（连同jquery.js）。
script.js 应该添加一个额外的元素（elem ) 到页面，单击该页面时会在script.js 内调用my_func。

麻烦的是，当元素被点击时，总是有一个ReferenceError: my_func is not defined，但它是在script.js中定义的。我意识到这与“隔离环境”的事情有关..但我不知道如何解决这个问题..

PS.：Chrome、JS 和 JQuery 的新手。
_{历史：Python :)}

一些代码（只是添加了元素）：

function on_ready(){
    var wanted = get_desired() // fetch desirable elements
    add_to_all(wanted) // this calls add for every element in wanted
}
function add(obj_to_edit) {
    if (obj_to_edit.css('position') == 'static'){
        obj_to_edit.css('position','relative')}

    var elem = $("<div ... onclick='my_func(this)'>...</div>")

    obj_to_edit.mouseenter(show_button);
    obj_to_edit.mouseleave(hide_button);
    elem.prependTo(obj_to_edit);
    elem.hide()
}

function my_func(elem){
    console.log($(elem).parent().html)
}

$(document).ready(on_ready);

这个想法是当有人将鼠标悬停在某个对象上时，elem 会弹出，当用户单击它时，它会记录一条消息..

【问题讨论】：

你有没有文档准备功能里面的my_func。还要确保script.js 在jquery.js 之后。
@saravanan 是的。我有一个设置一切的功能，它位于$(document).ready(...)。是的。。
如果您使用的是内联 onclick，请尝试将其更改为在您的脚本中定义。
@BeardFist 实际上调用是my_func(this)，所以我得到了元素，因为我可能已经为这些“元素”注入了多个。
您需要发布一个简单的代码示例来演示该问题。我们不是读心术的人，如果没有看到代码，我们就无法判断你做错了什么，并且试图用这样的问题/答案来预测它会令人沮丧。

标签： javascript google-chrome-extension referenceerror

【解决方案1】：

正如您所猜测的那样，您获得ReferenceError: my_func is not defined 的原因与“隔离环境”的事情有关。 onclick html 属性中定义的处理程序在普通页面上下文中运行，而您的函数在内容脚本上下文中定义。

那个问题的解决方案是以编程方式添加点击处理程序，无论如何这是更好的做法。只需从您的 html 字符串中删除 onclick='my_func(this)' 并添加以下行：

elem.click( my_func );

有关其他注意事项，请参阅 torazaburo 的回答。

【讨论】：

【解决方案2】：

第一个问题是您为什么要这样做。抱歉，如果您希望人们真正帮助您解决纯粹机械问题之外的任何问题，您确实需要回答这个问题。

例如，根据你正在做的事情，使用::before 伪元素可能会更好，其可见性响应hover 状态：

.desired::before {
    content: "Press me!";
    display: none;
}
.desired::before:hover {
    display: block;
}

就是这样——没有插入，没有 mouseenter 或 mouseleave 事件，只有纯 CSS。

在设置事件处理程序方面，您使用旧式 onclick 属性有点奇怪，而现代方法当然是

elem.on("click",function(){...});

或者，更干净一点

elem.on("click",my_func);

其中 my_func 被重写为 this 作为有问题的元素：

function my_func(){
    console.log($(this).parent().html);
}

通过将position CSS 属性的值更改为relative，我没有得到您想要完成的任务。除非您还指定了诸如top 之类的属性，否则这将无效。顺便说一句，检查position 或static 可能不会做你想做的事——只有当有问题的元素具有明确的静态位置时，此检查才会成功，或者通过在style 中指定属性或之前由.css 调用设置。因此，您将属性值更改为relative 可能永远不会发生。

在任何情况下，如果由于某种原因原始 HTML 没有这个，而你真的想动态添加它，那么只需向所需元素添加一个类，然后使用 CSS 规则设置 @987654337 会更简洁@ 以及您想要更改的任何其他属性，而不是在每个元素上摆弄 CSS。这就是类和 CSS 规则的用途：

get_desired().addClass("desired");

假设 get_desired 返回一个 jQuery DOM 集合。如果你是链式风格的爱好者，你也可以在这里设置事件处理程序

get_desired().addClass("desired").on("click",my_func);

那么，就

.desired {
    position: relative;
}

至于您提出的具体问题，如果您的代码实际上与您显示的一样，那么当然应该找到my_func。所以其他事情正在发生。让人们在这里帮助您找出问题的唯一方法是显示所有代码。

【讨论】：