如何在“查看页面源代码”中找到产生数据的js代码?
有些网页的数据是js输出的,如何才能找到这些js?
比如:
网页地址: http://pubs.rsc.org/en/results?searchtext=Author%3Alingling%20ge
................补充线......................................
右下角红色框内是否为参数?分别为searchterm、resultcount、category、pageno.其中searchterm像数据包,有头有尾的
Answers
查看网络请求,确定哪个请求获取了你要找的这部分内容
一般来说产生内容方式主要有
- 页面内联js包含数据,由脚本动态渲染,这种情况,查看源代码搜文本关键字就可以了
- iframe一个页面,在目标区域右击 -> 查看框架源代码,应该就可以看到了
- js脚本内包含数据,由脚本动态渲染, 这种情况要找出哪个script请求包含这些数据
- ajax获取数据 动态渲染,查看哪个XHR请求包含这些数据
- jsonp获取数据 动态渲染,查看哪个script请求包含这些数据
除了1.2两点可以直接查看源代码,其他都需要查看网络请求,抓包或者直接看控制台的network面板都可以,只是后者不方便搜索
像你这个例子, 右键是没有
查看框架源代码
选项的,就肯定不是iframe,经过简单的搜索, 就可以找到,它是通过ajax获取的一段html代码
这个光靠源代码找是不太方便的,用开发者工具可以很容易的找到。
首先,在该网页加载过程中发出的请求中搜索标题,我搜索的是Droplet单词。发现该单词是由'en/search/journalresult'请求的。请求结果中反回了这一块的html。
然后找哪段代码发出的该请求。在js中全局搜索journalresult,找到如下代码:
var resultURL = '/en/search/journalresult';
结下来搜索resultURL,这个结果就比较多了,其中有4处可能是发出该请求的代码,分别在这四处加断点,然后刷新网页。加载时在第一处断点也就是searchresult.js文件的第146行处中断过一次,其它断点未触发。所以可以肯定是该处发出的请求。
查看该处代码,发现是利用$().load()函数请求html后装载如当前页面中。
over