Question

我正在开发一个扩展并创建一个弹出窗口。

chrome.windows.create({  
        url: "../html/dialog.html",  
        width: 400,  
        height: 200,
        focused: true,
        type: "popup"
    }, function(){
        //callback
    });

在回调中，我想使用JQuery更改页面内容，添加文本和图像，所以我通常会做的是：

$('#dialog_content').html("hello!");

在dialog.html文档中有div：

<div id="dialog_content"></div>

但是，在加载页面内容之前，很可能会调用回调，因此$('#dialog_content')尚不存在。

我尝试使用

$('#dialog_content').load(function () {
    $('#dialog_content').html("hello!");
});

但它不起作用，不会调用该事件。

我还有其他办法吗？

感谢。

（ps：JQuery包含在后台）

Answer 1

你做错了.chrome.windows.create中的回调函数用于在后台执行一些任务。它无权访问DOM.DOM只能通过内容脚本访问。

要更改“dialog.html”的内容，请将jquery.js和自定义脚本附加到“dialog.html”，如下所示。

$http

现在在background.js中，如果你没有做任何api相关的任务，就不需要在chrome.window.create中包含回调函数

<html lang="en">
  <head>

  </head>
  <body>

    <div id="dialog_content"></div>

    <script src="jquery.min.js"></script>    
    <script src="dialog.js"></script>
  </body>
</html>

要更新页面中的任何DOM，请在dialog.js。

中执行

chrome.windows.create({  
        url: "../html/dialog.html",  
        width: 400,  
        height: 200,
        focused: true,
        type: "popup"
    });

您还可以执行background.js中定义的功能。

$(function () {
  //when page is loaded
   $('#dialog_content').html("hello!");
});

加载窗口内容上的Chrome扩展事件

1 个答案: