如何从网页中抓取这个轮播js代码?

image.png

这个百度新闻的首页的右侧是一个轮播,我想从网页上把这个js的轮播代码,拿下来,如何做?

https://news.baidu.com/

鼠标右键----view page sources ---- find in page ---- 输入关键字 小须鲸 ,这样找吗?有点笨拙。

回复
阅读 814
4 个回答

先说一下你这个方法只能作为查找的一个步骤。

首先搞明白轮播图多半是由html/js/css三部分组成的(也有可能大牛写canvas或者纯css,我们就不讨论)。但是我们无法知晓js和css是不是通过外部链接引入的,所以光从源代码里是可能找不到完整的轮播效果的代码。即使代码是直接写在HTML中,也有可能是压缩混淆过的,你不知道哪段代码是轮播的。

如果你是有经验的前端,那么审查一下元素,通过class或者一些标识就能知道用的什么第三方库。我们就假设什么都不知道,如何从零开始查找。

讲一下我的查找步骤,可能不是最方便的,但是确实有用的(其实这个方法对于一些看上去是用第三方库实现的效果都行得通):

1.首先我们右键审查元素,定位到DOM结构中。查找轮播图的class或者id,这两个标识的值是最有可能出现在源代码中的,并且class的值普遍是比较通用的,可能会作为前缀出现多次。因为一般的轮播图都需要通过id或者class来进行DOM操作。这里发现imgview这个标识还有imgplayer这两个标识是比较可能作为JS操作元素的,imgplayer作为前缀出现了多次。(其实这一步你用“小鲸鱼”去找本质上也是一个意思,就是找js中是否出现了这个关键词,运气好的好可能更快)
image.png

2.然后我们直接ctrl+f搜索这个关键词,一直回车,找到除了html里,js和css是否存在这些关键词。发现js里确实存在,并且它引入了base.jsContentPlayer.js文件。说明这个轮播效果是依赖这两个js文件的。所以目前你需要这段js代码,同时还需要把那两个js文件也扒下来。(如果这一步在js代码中不存在关键词,那么多半就是通过script标签引入的js里了,就从引入的js去找)
image.png

3.目前来看js应该是搞定了,还差个css样式,我们就直接回到刚刚审查元素那里,看下右侧样式是由哪些地方引入的即可。发现有focustop_415cfee.cssmodule_static_include_130fb43.css。直接点击就可以打开源码。
image.png

至此基本上这个轮播图依赖的js和css就找全了,但是如果你想拿过去实现同样的效果,可能还没这么简单。

大概率扒不下来
下面这段代码实现的轮播
你咋抄?起码还得装个require吧
image.png

按F12,点击如图所示图标,移到你要定位的元素,点一下就自动定位到该元素代码
image.png
image.png

推荐问题
宣传栏