Question

我在google页面中有一个按钮。 DOM Inspector提供了它的id。但是，尝试获取对象失败。我在控制台中编写类名时会得到未定义结果。页面中只有一个iframe，我的对象不在其中（据我所知）。

的manifest.json：

{
    "manifest_version": 2,
    "name": "modify strings",
    "description": "modify strings in bulk",
    "version": "1.0",
    "permissions": [
       "tabs",
       "history",
       "http://*/*",
       "https://*/*"
    ],  

    "content_scripts": [
        {
            "matches": ["https://play.google.com/apps/*"],
            "js": ["jquery-1.11.1.min.js", "myInject.js"],
            "all_frames": true
        }
    ],

    "web_accessible_resources": [
        "script.js",
        "jquery-1.11.1.min.js"
    ],

    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    }



}

myInject.js（内容脚本）：

var buttonJGET = jQuery("gwt-uid-115", document);   
console.log(buttonJGET.className);

Answer 1

jQuery使用CSS-like selectors。

要select element by its id，您需要使用＃。此外，jQuery总是返回一个结果数组，即使它是唯一的。

var buttonJGET = jQuery("#gwt-uid-115")[0];

jQuery元素与DOM元素不同;他们没有className属性。为了得到它，人们可以使用，例如：

console.log(buttonJGET.attr('class'));

还有other functions to deal with elements' classes。

否则，你可以extract a DOM element out of a jQuery element：

var buttonJGET = jQuery("#gwt-uid-115").get(0);
console.log(buttonJGET.className);

如果代码仍然失败，可能是因为在运行脚本时，没有具有该id的元素（尚未）。为了实现＆＃34;每次添加＆＃34;这样的元素时运行我的代码，可以使用DOM mutation observers（规范回答here）：

// Runs a function for every added DOM element that matches a filter
// filter -- either function(DOM_node){/*...*/}, returns true or false 
//           OR a jQuery selector
// callback -- function(DOM_node){/*...*/}
function watchNodes(filter, callback){
  var observer = new MutationObserver( function (mutations) {
    mutations.forEach( function (mutation){
      if(typeof filter === "function"){
        $(mutation.addedNodes).filter(
          function(i){ return filter(this); }
        ).each(
          function(i){ callback(this); }
        );
      } else {
        $(mutation.addedNodes).filter(filter).each(
          function(i){ callback(this); }
        );
      }
    });
  });

  // For every added element, a mutation will be processed
  //   with mutation.taget == parent
  //   and mutation.addedNodes containing the added element
  observer.observe(document, { subtree: true, childList: true });

  return observer;
}

使用（注意，过滤和回调使用DOM元素）：

function logger(node) {
  console.log(node.className); 
}

var observer = watchNodes("#gwt-uid-115", logger);

或者，例如，如果您要捕获id为gwt-uid的所有节点，则可以编写自定义过滤器：

function filter(node) {
  if(node.id && node.id.match(/^gwt-uid/)) return true;
  else return false;
}

var observer2 = watchNodes(filter, logger);

在run_at: "document_start"注入此内容将确保您捕获所有添加的元素。

要停止观察，请在返回的观察者对象上调用observer.disconnect()。

在内容脚本中使用jQuery获取DOM对象失败

1 个答案: