javascript - chrome插件注入函数如何等网页XHR加载完成后再执行？

问题描述

问 题

1：我写了一个去除百度推广的函数，但是百度推广是XHR异步加载，然而chrome是等DOM加载完成就执行，这就导致了，我写的函数执行在异步加载前，没有达到我预期的效果（只有加载完成我手动刷新一下网页才能去掉广告）

2：执行代码（先导入了Jquery）

function display_none(){
$("span").filter(function(index){
    return $(this).text() == '商业推广';
}).parentsUntil("#content_left").css({"display":"none","visibility":"hidden"});
}

3：尝试过的方法：

1. 计算器循环执行，不知道哪里有问题，不能重复执行

2. 监听DOM数是否增加，（判断网页中是否存在含有span.text()== '商业推广'的标签，有则执行函数）不知道哪里有问题，未达到预期效果（效果同1）

3. 想通过监听XHR，拦截有商业推广的部分，弄不来，未能成功拦截

解决方案

已解决，不能执行计时器是因为：

window.setInterval(function(){}, 1000);

计时器里执行非匿名函数不加括号！不加括号！不加括号！,因为加括号是执行函数，不加括号是返回这个函数
如：

function test(){}
window.setInterval(function, 1000);

这样执行；

最终功能实现方案我选择的计时器重复循环执行（笨方法，等以后有时间再优化），完整代码如下：

var t1=0;t2=0;t3=0;//控制计时器执行次数
function display_none() {
    var flag_run = $("span").filter(function(index) {
        return $(this).text() == '商业推广'; //flag，通过它标识广告
    })
    if (flag_run.length!=0) {
        flag_run.parentsUntil("#content_left").css({ "display": "none", "visibility": "hidden" });
        //隐藏它及其父级元素
        $("span").filter(function(index) {
            return $(this).text() == '商业推广';
        }).remove();
        //删除flag，以免重复执行css重写函数
        clearall();
    }
    console.log("函数执行");//测试函数是否执行
    if(timer1) t1++;
    if(timer2) t2++;
    if(timer3) t3++;
    if(t1>5||t2>5||t3>5) clearall();
}
function clearall(){
    if(timer1) {clearInterval(timer1);t1=0;timer1=false;}
    if(timer2) {clearInterval(timer2);t2=0;timer2=false;}
    if(timer3) {clearInterval(timer3);t3=0;timer3=false;}
    //清除计时器，以免浪费资源
}
//初始化，让脚本运行
var timer1 = window.setInterval(display_none, 1000);
var timer2 = window.setInterval(function(){}, 1000);
var timer3 = window.setInterval(function(){}, 1000);
//监听点击百度搜索事件
$("#su").click(
   function() {
    timer2=window.setInterval(display_none, 1000);
    t2=0;//防止计数过快
  }
    //重新启用计时器
);
//监听百度搜索input框内容是否变化
$('#kw').bind('input propertychange', function() {
    timer3=window.setInterval(display_none, 1000);
    t3=0;
  //重新启用计时器
});

这篇关于javascript - chrome插件注入函数如何等网页XHR加载完成后再执行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！