js注入展示所有页面

已于 2024-04-12 15:44:54 修改
阅读量234 收藏
点赞数 3
分类专栏： 爬虫 文章标签： javascript 爬虫 python
于 2024-04-12 14:34:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44596943/article/details/137679982
版权

有一个网页本来有20页列表数据，但只展示前10页，如何根据下面的js代码，修改进行js注入，重新加载后显示所有页面？

查看源码方式：F12-Sources-page-top-js
找到与页面加载相关js代码，源码如下：

;(function ($, window, document, undefined) {
    'use strict';
    function Paging(element, options) {
        this.element = element;
        this.options = {
            nowPage: options.nowPage || 1, // 当前页码
            pageNum: options.pageNum, // 总页码
            countTotal: options.countTotal, // 总数
			canJump: options.canJump || 0, // 是否能跳转。0=不显示（默认），1=显示
			showOne: options.showOne || 1,//只有一页时，是否显示。0=不显示,1=显示（默认）
            buttonNum: (options.buttonNum>=6?6:options.buttonNum) || 10,// 页面显示页码数量
            callback: options.callback // 回调函数
        };
        this.init();
    }
    Paging.prototype =  {
        constructor : Paging,
        init : function() {
            this.createHtml();
            this.bindClickEvent();
            this.disabled();
        },
        createHtml : function(){
            var me = this;
            var nowPage = this.options.nowPage;
            var pageNum = this.options.pageNum;
            var countTotal = this.options.countTotal;
            var buttonNum = this.options.buttonNum;
			var canJump = this.options.canJump;
			var showOne = this.options.showOne;
            var content = [];
            
			//对nowPage进行判断
			nowPage = nowPage > pageNum ? pageNum : nowPage;
			nowPage = nowPage < 1 ? 1 : nowPage;
			//如果只有一页并且设置为不显示，则不进行渲染
			if(showOne && pageNum === 1){
				return '';
			}
            var currentPageNum = $("#page").find("li.xl-active").text();
            /*
            if("1"!=nowPage){
                var  dataCode = $('#data_code').attr('data-value');//验证码
                var cont2 = $('#cont2').val();
                if(isEmpty(cont2)){
                    zdalert('提示','请输入验证码！',function(){ });
                    //$('#cont2').val("");
                    document.getElementById("data_code").click();
                    return false;
                }else if(dataCode.toLowerCase() == cont2.toLowerCase()||(pageFlag&&currentPageNum==nowPage)){
                    pageFlag = true;
                }else{
                    //忽略大小写
                    if(dataCode.toLowerCase() != cont2.toLowerCase()){
                        zdalert('提示','请输入正确的验证码！',function(){ });
                        //$('#cont2').val("");
                        document.getElementById("data_code").click();
                        return false;
                    }
                }
            }
            */
            content.push("<ul>");
            content.push("共" + countTotal + "条");
            /*
            content.push("<li class='xl-prevPage'>上一页</li>");
            //页面总数小于等于当前要展示页数总数，展示所有页面
            if(pageNum <= buttonNum){
                for(var i=1; i<=pageNum; i++){
                    if (nowPage !== i) {
                        content.push("<li>"+i+"</li>");
                    } else if(nowPage == i){
                        content.push("<li class='xl-active'>"+i+"</li>");
                    }else{
                        content.push("<li class='xl-active'>"+i+"</li>");
                    }
                }
            }else if(nowPage <= Math.floor(buttonNum / 2)){
                //当前页面小于等于展示页数总数的一半（向下取整），从1开始
                for(var i=1;i<= buttonNum-2;i++){
                    if (nowPage !== i) {
                        content.push("<li>"+i+"</li>");
                    } else {
                        content.push("<li class='xl-active'>"+i+"</li>");
                    }
                }
                content.push("<li class='xl-disabled'>...</li>");
                content.push("<li>" + pageNum + "</li>");
            }else  if(pageNum - nowPage <= Math.floor(buttonNum / 2)){
                //当前页面大于展示页数总数的一半（向下取整）
                content.push("<li>"+1+"</li>");
                content.push("<li class='xl-disabled'>...</li>");
                for(var i=pageNum-buttonNum+3; i<=pageNum; i++){
                    if (nowPage !== i) {
                        content.push("<li>"+i+"</li>");
                    } else {
                        content.push("<li class='xl-active'>"+i+"</li>");
                    }
                }
            }else{
                //前半部分页码
                if(nowPage - Math.floor(buttonNum / 2) <= 0){
                    for(var i=1;i<= Math.floor(buttonNum / 2);i++){
                        if (nowPage !== i) {
                            content.push("<li>"+i+"</li>");
                        } else {
                            content.push("<li class='xl-active'>"+i+"</li>");
                        }
                    }
                }else{
                    content.push("<li>"+1+"</li>");
                    content.push("<li class='xl-disabled'>...</li>");
                    for(var i=nowPage-Math.floor(buttonNum / 2)+(buttonNum % 2 == 0 ? 3: 2); i<=nowPage; i++){
                        if (nowPage !== i) {
                            content.push("<li>"+i+"</li>");
                        } else {
                            content.push("<li class='xl-active'>"+i+"</li>");
                        }
                    }

                }
                //后半部分页码
                if(pageNum - nowPage <= 0){
                    for(var i=nowPage+1;i<=pageNum;i++){
                        content.push("<li>" + i + "</li>");
                    }
                }else{
                    for(var i=nowPage+1; i<=nowPage+Math.floor(buttonNum / 2)-2; i++){
                        content.push("<li>"+i+"</li>");
                    }
                    content.push("<li class='xl-disabled'>...</li>");
                    content.push("<li>" + pageNum + "</li>");
                }
            }
            
            content.push("<li class='xl-nextPage'>下一页</li>");
            */
            if(pageNum >10){
                for(var i=1; i<=10; i++){
                    if (nowPage !== i) {
                        content.push("<li>"+i+"</li>");
                    } else if(nowPage == i){
                        content.push("<li class='xl-active'>"+i+"</li>");
                    }else{
                        content.push("<li class='xl-active'>"+i+"</li>");
                    }
                }
            }else{
                for(var i=1; i<=pageNum; i++){
                    if (nowPage !== i) {
                        content.push("<li>"+i+"</li>");
                    } else if(nowPage == i){
                        content.push("<li class='xl-active'>"+i+"</li>");
                    }else{
                        content.push("<li class='xl-active'>"+i+"</li>");
                    }
                }
            }
			if(canJump){
                content.push("<li class='xl-jumpText xl-disabled'>跳转到<input type='number' id='xlJumpNum' style='border:1px;跳转到'>页</li>");
				content.push("<li class='xl-jumpButton'>确定</li>");
			}
            if(pageNum>10){
                content.push("<li class='xl-disabled'>...</li>");
            }
            //content.push("共" + pageNum + "页");
            content.push("</ul>");
            me.element.html(content.join(''));
           
             // DOM重新生成后每次调用是否禁用button
            setTimeout(function () {
                me.disabled();
            }, 20);
            
        },
        bindClickEvent: function(){
            var me = this;
            me.element.off('click', 'li');
            me.element.on('click', 'li', function () {
                debugger
                var cla = $(this).attr('class');
                var num = parseInt($(this).html());
                var nowPage = me.options.nowPage;
                if( $(this).hasClass('xl-disabled') || cla === 'xl-jumpText'){
                    return '';
                }
                if (cla === 'xl-prevPage') {
                    if (nowPage !== 1) {
                        me.options.nowPage -= 1;
                    }
                } else if (cla === 'xl-nextPage') {
                    if (nowPage !== me.options.pageNum) {
                        me.options.nowPage += 1;
                    }
                }else if(cla === 'xl-jumpButton'){
                    me.options.nowPage = Number($('#xlJumpNum').val());
                }else{
					me.options.nowPage = num;
				}

                me.createHtml();
                if (me.options.callback) {
                    me.options.callback(me.options.nowPage);
                }
            });

        },
        disabled: function () {
            var me = this;
            var nowPage = me.options.nowPage;
            var pageNum = me.options.pageNum;
            if (nowPage === 1) {
                me.element.children().children('.xl-prevPage').addClass('xl-disabled');
            } else if (nowPage === pageNum) {
                me.element.children().children('.xl-nextPage').addClass('xl-disabled');
            }
        }
    }
    $.fn.paging = function (options) {
        return new Paging($(this), options);
    }
})(jQuery, window, document);

下面这个是修改了的js代码，就是删了页面小于10的判断，展开所有分页的。
修改之后在代码中注入js代码：
from js import js_s
await page.evaluate(js_s, force_expr=True)
然后在点击第二页时，就会展示所有页面按钮。

;(function ($, window, document, undefined) {
    'use strict';
    function Paging(element, options) {
        this.element = element;
        this.options = {
            nowPage: options.nowPage || 1, // 当前页码
            pageNum: options.pageNum, // 总页码
            countTotal: options.countTotal, // 总数
			canJump: options.canJump || 0, // 是否能跳转。0=不显示（默认），1=显示
			showOne: options.showOne || 1,//只有一页时，是否显示。0=不显示,1=显示（默认）
            buttonNum: (options.buttonNum>=6?6:options.buttonNum) || 10,// 页面显示页码数量
            callback: options.callback // 回调函数
        };
        this.init();
    }
    Paging.prototype =  {
        constructor : Paging,
        init : function() {
            this.createHtml();
            this.bindClickEvent();
            this.disabled();
        },
        createHtml : function(){
            var me = this;
            var nowPage = this.options.nowPage;
            var pageNum = this.options.pageNum;
            var countTotal = this.options.countTotal;
            var buttonNum = this.options.buttonNum;
			var canJump = this.options.canJump;
			var showOne = this.options.showOne;
            var content = [];
            
			//对nowPage进行判断
			nowPage = nowPage > pageNum ? pageNum : nowPage;
			nowPage = nowPage < 1 ? 1 : nowPage;
			//如果只有一页并且设置为不显示，则不进行渲染
			if(showOne && pageNum === 1){
				return '';
			}
            var currentPageNum = $("#page").find("li.xl-active").text();

            content.push("<ul>");
            content.push("共" + countTotal + "条");


            for(var i=1; i<=pageNum; i++){
                if (nowPage !== i) {
                    content.push("<li>"+i+"</li>");
                } else if(nowPage == i){
                    content.push("<li class='xl-active'>"+i+"</li>");
                }else{
                    content.push("<li class='xl-active'>"+i+"</li>");
                }
            }
            // }
			if(canJump){
                content.push("<li class='xl-jumpText xl-disabled'>跳转到<input type='number' id='xlJumpNum' style='border:1px;跳转到'>页</li>");
				content.push("<li class='xl-jumpButton'>确定</li>");
			}

            content.push("</ul>");
            me.element.html(content.join(''));
             // DOM重新生成后每次调用是否禁用button
            setTimeout(function () {
                me.disabled();
            }, 20);
            
        },
        bindClickEvent: function(){
            var me = this;
            me.element.off('click', 'li');
            me.element.on('click', 'li', function () {
                debugger
                var cla = $(this).attr('class');
                var num = parseInt($(this).html());
                var nowPage = me.options.nowPage;
                if( $(this).hasClass('xl-disabled') || cla === 'xl-jumpText'){
                    return '';
                }
                if (cla === 'xl-prevPage') {
                    if (nowPage !== 1) {
                        me.options.nowPage -= 1;
                    }
                } else if (cla === 'xl-nextPage') {
                    if (nowPage !== me.options.pageNum) {
                        me.options.nowPage += 1;
                    }
                }else if(cla === 'xl-jumpButton'){
                    me.options.nowPage = Number($('#xlJumpNum').val());
                }else{
					me.options.nowPage = num;
				}

                me.createHtml();
                if (me.options.callback) {
                    me.options.callback(me.options.nowPage);
                }
            });

        },
        disabled: function () {
            var me = this;
            var nowPage = me.options.nowPage;
            var pageNum = me.options.pageNum;
            if (nowPage === 1) {
                me.element.children().children('.xl-prevPage').addClass('xl-disabled');
            } else if (nowPage === pageNum) {
                me.element.children().children('.xl-nextPage').addClass('xl-disabled');
            }
        }
    }
    $.fn.paging = function (options) {
        return new Paging($(this), options);
    }
})(jQuery, window, document);
Xomm
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js注入 黑客之路必备！
10-21
主要为大家详细介绍了js注入，黑客之路必备！本文告诉大家什么是js注入，如何进行js注入攻防，感兴趣的小伙伴们可以参考一下
网页js脚本注入，可执行任意代码。
11-01
网页js脚本注入，可执行任意代码。这里有个实例教程，通过注入实现跳过验证码。
2024年android webView注入js方法(1)，2024年最新android系统开发面试题
最新发布
I_846815793的博客
05-13 971
我最近从朋友那里收集到了2020-2021BAT 面试真题解析Android 基础、Java 基础、Android 源码相关分析、常见的一些原理性问题等等，可以很好地帮助大家深刻理解Android相关知识点的原理以及面试相关知识。这份资料把大厂面试中常被问到的技术点整理成了PDF，包知识脉络 + 诸多细节；还有 高级架构技术进阶脑图 帮助大家学习提升进阶，也节省大家在网上搜索资料的时间来学习，也可以分享给身边好友一起学习。这里也分享给广大面试同胞们，希望每位程序猿们都能面试成功~
页面注入的JS脚本和Content Script（内容脚本）的通信
扶摇的博客
10-29 1525
页面注入的JS脚本和Content Script（内容脚本）的通信
配置页面注入
ArcherSYM的博客
11-04 580
// function list(data) { //var config = { // F_First1 : "公告", // F_First2 : "新闻", // F_First3 : "", // F_Second1 : "急件", // F_Second2 : "平件", /...
chrome插件js注入网页demo
11-22
一个完整的js注入网页的demo,可以直接解压后使用chrome加载该插件,在开发模式下加载文件夹
页面中引入js的几种方法
weixin_34037173的博客
09-21 1039
通常大家最为熟悉的是一下两种方法： 在页面中直接写入<script type="text/javascript">js代码</script>。 在页面中引入外部文件<script src="xx.js"></script>。 下面再介绍几种页面引入js的代码： 在js中引入外部js，通过document.wirite("scr"+...
JavaScript注入漏洞的原理及防范(详解)
11-29
JavaScript注入漏洞是网络安全领域的一个重要话题，它主要发生在web应用程序中，允许恶意用户通过注入JavaScript代码来篡改页面的行为或窃取用户数据。当系统未能正确处理用户输入，并将其作为可执行的JavaScript...
jquery ajax对特殊字符进行转义防止js注入使用示例
10-26
在Web开发中，JavaScript注入（JS注入）是一种常见的安全威胁，它允许攻击者通过输入恶意脚本到网页的输入字段，使这些脚本在用户的浏览器上执行，可能导致数据泄露、权限提升或其他不良后果。jQuery的AJAX功能在...
自写简单JS判断是否已经弹出页面
10-28
标题中的“自写简单JS判断是否已经弹出页面”指的是使用JavaScript编写的一种方法，用于检测一个网页窗口是否已经被用户打开或关闭。这种功能在广告跟踪、用户体验监测或者特定功能触发时非常有用，尤其是在不能依赖...
css-injector:将 CSS 注入页面底部
06-24
有时，为了提高页面加载速度和优化用户体验，开发者会选择在页面底部注入CSS，以避免阻塞页面内容的渲染。"css-injector"是一个jQuery插件，专门用于实现这个功能。以下是对这个插件的详细解释。 ### 1. 插件介绍 *...
html页面注入教程,html注入的入门教程
weixin_35941591的博客
06-03 1521
HTML injection的背景：1 现在的XSS就是跨站脚本***一般都是在有服务器交互的情况下在客户端产生的一些问题，那么在没有服务器交互的情况下呢？2 另外就是很多人都认为html文件是绝对安全的，那么真的是这样么？什么是HTML injection:有交互才会产生漏洞，无论交互是怎么进行的，HTML文件并不是像大家想的那样没有任何交互，在HTML文件里还是会用到一些javascrip...
浅谈javascript注入攻击
qq_41914181的博客
10-17 1万+
前言 记录一次防止js注入的项目经历，起因，项目在测试过程中，发现可能存在注入可能，于是拿到代码开始查看，因为现在前后端分离的情况下，需要特殊处理避免XSS攻击（跨站脚本攻击）的情况已经很少了，所以这次情况引起了我的兴趣。 介绍 什么是javascript注入攻击？简单来说，就是页面上输入的内容中带有可执行的javascript，而你使用这段输入内容的时候，让这段用户提供的代码执行了，也就是你写的代码，执行了非你写的代码，就会导致网页的不可行乃至更严重的安全威胁。 传统页面的服务端渲染 因为传统页面基本都是
JavaScript 中的依赖注入
奇舞周刊
12-28 2207
依赖注入 DI (Dependency Injection) 是编程领域中一个非常常见的设计模式，它指的是将应用程序所需的依赖关系（如服务或其他组件）通过构造函数参数或属性自动注入的过程。这样做的好处是可以减少组件之间的耦合，更容易测试和维护。我们先举个简单的例子，我们有两个简单的 A 类和 B 类，在 B 类中依赖了 A 类，我们在 B 类中对它进行实例化，并调用它的方法：classA{ ...
浏览器控制台注入JS
Haveyounow的博客
06-09 2018
浏览器控制台注入JS
javascript依赖注入详解
nongshuqiner的博客
12-13 9393
本文作者：言墨儿 原文出处：简书，csdn 未经同意，禁止转载 本人在研究前端自动化时，开始深入学习设计模式，由此引发了对依赖注入的学习，站在巨人的肩膀上参考了很多文章，在这里对这些作者表示敬仰，并赋予相关博客链接。 前端需要知道的 依赖注入(Dependency Injection, DI)-IMWeb 黎清龙 JavaScript里的依赖注入 ralph_zhu-细数Javasc
js注入
BigBoy_Coder的博客
05-04 858
　　最近刚出了新闻，阿里四名网络安全部门员工利用网页漏洞写js脚本抢月饼，于是兴致来了，想了解一下这个js脚本到底怎么写，各种刷单各种抢枪抢又是怎么实现的。 什么是javascript注入攻击？ 　　1.每当接受用户输入的内容并重新显示这些内容时，网站就很容易遭受 JavaScript 注入攻击。让我们研究一个容易遭受 JavaScript 注入攻击的具体应用程序。假设已经创建了一个客户反馈网...
js脚本注入html,javascript – 将js注入头部(脚本中包含完整代码)
weixin_36302134的博客
06-22 965
我想在网站的头部添加一个脚本,以便目标html的头部看起来像这样< head>< script type =“text /javascript”> *一些代码…… *< / script&gt ;< /头取代. 使用此脚本可以完美地完成：var head = document.getElementsByTagName('head')[0],script ...
前端页面JS注入问题，前端XSS安全问题解决办法
热门推荐
41981DC的博客
09-24 3万+
在页面中增加 JS 校验，对特殊符号进行替换，防止用户输入恶意代码导致 JS 注入问题。 在 web 开发中，对用户输入的内容做校验是必不可少的环节，不管是通过正则表达式对用户的输入进行校验，还是通过对特殊符号进行转义，均可达到目的。通过正则表达式校验，可能会导致用户体验差一点（因为用户不能自由输入~~），本文通过对 特殊符号进行转义 的方法来演示。 示例 自定义添加角色，包括角色名称、角色...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值