栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

当页面被history.pushState和ajax调用更改时插入内容脚本

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

当页面被history.pushState和ajax调用更改时插入内容脚本

我可以想到两种方法:

1-使用计时器检查脚本是否仍然存在,否则,请再次添加…
2-检查ajax调用,如果它们的URL与删除脚本的URL之一匹配,请再次添加脚本。

即使在ajax调用之后,您的脚本(清单中定义的脚本)仍然存在,只是不再运行(不确定历史记录推送器会发生什么)。因此,我假设您只需要阅读一些元素或重新运行Stript。我以为您添加了附加html标记的脚本。

因此,您需要读取某些元素或重新运行某些代码。


1-计时器方法-我为希望添加到页面中某个 目标元素的* 任何元素 (不仅是脚本)创建了解决方案。 *

它使用计时器检查目标元素是否存在。当找到目标元素时,就添加我的元素。然后调整计时器以检查我的元素是否仍然存在。如果没有,请再次添加。

您只需

appendChildPersistent
要打一次电话,这将在您浏览时始终保持活动状态。

var timers = {}; //stores the setInterval ids//this is the only method you need to call//give your script an `id` (1)//the child is your script, it can be anything JQuery.append can take//toElem is the Jquery "SELECtOR" of the element to add your script into.//I'm not sure what would happen if toElem were not a string.//callback is a function to call after insertion if desired, optional.appendChildPersistent = function(id, child, toElem, callback){    //wait for target element to appear    withLateElement(toElem, function(target)    {        target.append(child); //appends the element - your script     if (typeof callback !== 'undefined') callback(); //execute callback if any        //create a timer to constantly check if your script is still there        timers[id] = setInterval(function()        {       //if your script is not found, clear this timer and tries to add againif (document.getElementById(id) === null) {     clearInterval(timers[id]);     delete timers[id];     appendChildPersistent(id, child, toElem, callback); }        },3000);    });}//this function waits for an element to appear on the page//since you can't foresee when an ajax call will finish//selector is the jquery selector of the target element//doAction is what to do when the element is foundfunction withLateElement(selector, doAction){       //checks to see if this element is already being waited forif (!(selector in timers))    {        //create a timer to check if the target element appeared  timers[selector] = setInterval(function(){    var elem = $(selector); //checks if the element exists and is not undefined if (elem.length >= 0) {     if (typeof elem[0] !== 'undefined')     {         //stops searching for it and executes the action specified         clearInterval(timers[selector]);         delete timers[selector];         doAction(elem);     } }        }, 2000);    }    }

(1)在脚本标签中添加ID似乎不是问题:为脚本标签提供ID


2-捕获ajax调用

一种选择是使用chrome.webRequest。但是奇怪的是,这对我没有用。下面是另一个选择。

对于这种情况,请检查此答案, 不要忘 了在那里阅读与 Chrome扩展程序
相关的答案。只有遵循整个过程,它才起作用。幸运的是,我今天进行了测试,它效果很好:p

在这里,您要做的是更改

XMLHttpRequest
方法
open
send
在调用它们时进行检测(并可能也获取参数)。

但是,在Google扩展程序中,绝对有必要 在页面中注入Stript (不是后台页面或脚本注入内容脚本,而是内容脚本向 dom中
注入一些代码,如下所示)。

var script = document.createElement('script');script.textContent = actualCode; //actual pre is the pre you want to inject, the one that replaces the ajax methodsdocument.head.appendChild(script); //make sure document.head is already loaded before doing itscript.parentNode.removeChild(script); //I'm not sure why the original answer linked removes the script after that, but I kept doing it in my solution

这是至关重要的,因为该扩展程序试图创建一个隔离的环境,并且您

XMLHttpRequest
对此环境所做的更改将完全不参与。(这就是为什么JQuery.ajaxComplete似乎不起作用的原因,您需要在页面中注入脚本才能使其工作-
请在此处查看)

在此纯Javascript解决方案中,您将替换方法:

//enclosing the function in parentheses to avoid conflict with vars from the page scope(function() {    var XHR = XMLHttpRequest.prototype;    // Store the orignal methods from the request    var open = XHR.open;    var send = XHR.send;    // Create your own methods to replace those    //this custom open stores the method requested (get or post) and the url of the request    XHR.open = function(method, url) {        this._method = method; //this field was invented here        this._url = url; //this field was invented here        return open.apply(this, arguments); //calls the original method without any change        //what I did here was only to capture the method and the url information    };    //this custom send adds an event listener that fires whenever a request is complete/loaded    XHR.send = function(postData) {        //add event listener that fires when request loads        this.addEventListener('load', function() { //what you want to do when a request is finished //check if your element is there and readd it if necessary //if you know the exact request url, you can put an if here, but it's not necessary addMyElementsToPage(); //your custom function to add elements console.log("The method called in this request was: " + this._method); console.log("The url of this request was: " + this._url); console.log("The data retrieved is: " + this.responseText);        });        //call the original send method without any change        //so the page can continue it's execution        return send.apply(this, arguments);        //what we did here was to insert an interceptor of the success of a request and let the request continue normally    };})();


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/399794.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号