如何用鼠标选择页面上的元素并将其隐藏在javascript中

debugcn 发表于 Dev

瓦吉夫

我正在为 chrome 制作一个测试扩展。我的问题：

是否可以制作一个事件脚本来用鼠标选择一个元素并将其隐藏？当您按下时，类似于检查元素选择工具Shift+Ctrl+C。注意：我不想在之后进行 DOM 重排。

这是我的代码：

内容.js：

var elems = document.getElementsByTagName("iframe");

$(document).ready(function() {
    for (var i = 0, max = elems.length; i < max; i++) {
        elems[i].hidden = true;
    };
});

window.onload = function() {
    for (var i = 0, max = elems.length; i < max; i++) {
        elems[i].hidden = true;
    }
};

$(window).load(function() {
    for (var i = 0, max = elems.length; i < max; i++) {
        elems[i].hidden = true;
    };
});

for (var i = 0, max = elems.length; i < max; i++) {
    elems[i].hidden = true;
};

清单.json：

{
  "manifest_version":2,
  "name":"Test",
  "description":"A Basic program",
  "version":"0.1",
  "background":{
     "scripts":[

     ]
  },
  "content_scripts":[
     {
        "matches":[
           "<all_urls>"
        ],
        "js":[
          "jquery-3.2.1.min.js",
          "content.js"
        ]
     }
  ],

  "browser_action":{
     "default_title":"Test"
   }
 }

基思

有多种不同的方式来选择一个元素，还有一种方式可以隐藏它。

首先，您可以使用chrome.contextMenus.create.

要处理关键和弦（如SHFT+CTRL+C），您需要在页面中使用背景脚本。

在此事件中，您可以操作 DOM 来隐藏元素。使用element.style.display = 'none'崩溃内容围绕它，或element.style.opacity = '0'将其隐藏，同时保持页面不变的其余部分。

查看您的源代码：

var elems = document.getElementsByTagName("iframe");

好的，这应该得到<iframe>页面中的所有标签，假设它们已经加载。默认情况下，内容脚本在 DOM 完成后触发，但可以在 onload 事件之前或之后。

接下来...

$(document).ready(function() { ...
window.onload = function() { ...
$(window).load(function() { ...

这些似乎是将其连接到已完成加载的文档的不同尝试。问题是window.onload可能（也可能没有）已经开火了。您可以window.onload使用"run_at": "document_end"in强制内容脚本在之前运行manifest.json，但我认为这不是您想要的。

请注意，所有这些都使用elems您从带有内联脚本的 DOM 获得的变量，因此如果<iframe>在事件触发之前它不存在，那么它就不会在数组中。

最后，所有这些似乎都在尝试循环<iframe>s：

for (var i = 0, max = elems.length; i < max; i++) {
    elems[i].hidden = true;
};

这很好，但用于elems[i].style.visibility = 'hidden'避免回流 DOM。所以（使用 Chrome 扩展支持的 ES6 语法）：

function hideIframes() {
    const elems = document.getElementsByTagName('iframe');
    for (let e of elems) {
        e.style.visibility = 'hidden';
    };
}

// Don't do all of these - pick one that suits your context
hideIframes(); // Run inline on document_idle
$(hideIframes); // Run on jQuery complete
setTimeout(hideIframes, 3000); // Run again in 3s

我认为您的问题是<iframe>当内容脚本运行时，您要查找的s 尚未出现在页面中。您可能需要针对您认为正在添加它们的特定事件添加检查。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。