利用油猴脚本显示扇贝网真实打卡日记

最新推荐文章于 2024-03-01 22:40:50 发布

文剑木然

最新推荐文章于 2024-03-01 22:40:50 发布

阅读量961

点赞数

分类专栏：博客

本文链接：https://blog.csdn.net/wenjianmuran/article/details/90669932

版权

博主发现扇贝网页版打卡日记与手机版不一致，尝试使用静态页面和Ajax请求解决，但遇到跨站限制。接着学习JSONP和iframe，但都需要服务器端配合。最后通过编写油猴脚本，利用jQuery修改DOM，成功实现需求，避免跨站风险。

摘要由CSDN通过智能技术生成

本文首发在我的个人博客：https://jlice.top/p/7kmxm/。欢迎大家前去参观，么么哒~

前一段时间发现扇贝网页版显示的打卡日记和手机上看到的不一致，感觉应该是网页版开发滞后的原因。这种不一致给查卡带来了诸多不便，于是就设法解决该问题。

起初我想到的方案是做一个静态页面放到对象存储上，然后对象存储开启静态服务，静态页面通过Ajax请求手机版的RESTful接口获取数据，然后生成打卡日记。不过，通过反复试验发现这种方法行不通。

$.get(url, function(data){
   
    // do something
});

直接使用Ajax请求会报错：

No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是因为服务器不允许跨站。

然后接触到了用JSONP来进行跨站请求。因为js脚本可以跨站，像静态博客的评论功能就是用的跨站js脚本，JSONP的思路是在请求的地址上携带一个callback参数，服务端以这个callback参数作为函数名包裹JSON数据，然后在返回数据时调用这个函数，就把JSON数据传过来了。

$.ajax({
   
    url: url,
    dataType: 'jsonp',
    success: function(json){
   
        // do something
    }
});

但是，使用JSONP的前提同样是需要服务器端的配合。假如服务器端不适配JSONP，也就是不返回包裹JSON数据的函数，而是依旧返回JSON，那么JSON数据就会被视为javascript脚本运行，会报错：

Uncaught SyntaxError: Unexpected token :

然后想到iframe也可以跨站，于是试试iframe，结

关注

专栏目录