js动态加载的内容如何获取

xiaooooooo · 发表于 2023-6-5 22:02:41

cxxjackie 发表于 2023-6-4 22:30

大佬 elmGetter 这个脚本能不能获取一些流式数据？比如说websocket发送的字节流、弹幕之类的

cxxjackie · 发表于 2023-6-5 22:24:13

xiaooooooo 发表于 2023-6-5 22:02
大佬 elmGetter 这个脚本能不能获取一些流式数据？比如说websocket发送的字节流、弹幕之类的 ...

不能，这个不属于元素获取的范畴，你应该考虑劫持请求或者劫持对应函数，当然如果数据以元素的方式呈现，比如弹幕会在屏幕上生成元素，这种就可以用库抓取。

xiaooooooo · 发表于 2023-6-6 00:37:59

cxxjackie 发表于 2023-6-5 22:24
不能，这个不属于元素获取的范畴，你应该考虑劫持请求或者劫持对应函数，当然如果数据以元素的方式呈现， ...

ElementGetter对这个网站似乎失效了我只能拿到第一页的数据如果翻页的话还是拿不到第2页

// ==UserScript==
// @match       https://www.nmpa.gov.cn/datasearch/*
// @icon       https://www.google.com/s2/favicons?sz=64&domain=nmpa.gov.cn
// @require    http://cdn.bootcss.com/jquery/1.11.2/jquery.js
// @require    https://scriptcat.org/lib/513/2.0.0/ElementGetter.js
// @grant       GM_xmlhttpRequest
// ==/UserScript==

(function() {
'use strict';

elmGetter.selector($);
elmGetter.each('tbody tr.el-table__row', items_name => {
      console.log(items_name);
      console.log('page is fully loaded');
      console.log('xx');
      var dataList = [];
      for (var i=0; i<items_name.length; i++){
         var xuhao = $(items_name).find('td.el-table_1_column_1 div.cell div').text();
         var pizhunwenhao = $(items_name).find('td.el-table_1_column_2 div.cell p').text();
         var chanpinmingcheng = $(items_name).find('td.el-table_1_column_3 div.cell p').text();
         var shengchandanwei = $(items_name).find('td.el-table_1_column_4 div.cell p').text();
         var yaopinbenweima = $(items_name).find('td.el-table_1_column_5 div.cell span span div.el-popover__reference').text();
         var xiangqing = $(items_name).find('td.el-table_1_column_6 div.cell button span').text();
         dataList.push({
            'xuhao': xuhao,
            'pizhunwenhao': pizhunwenhao,
            'chanpinmingcheng': chanpinmingcheng,
            'shengchandanwei': shengchandanwei,
            'yaopinbenweima': yaopinbenweima,
            'xiangqing': xiangqing
         })

      }
      console.log(dataList);


});

// Your code here...
})();

cxxjackie · 发表于 2023-6-6 22:42:28

xiaooooooo 发表于 2023-6-6 00:37
ElementGetter对这个网站似乎失效了我只能拿到第一页的数据如果翻页的话还是拿不到第2页

// ==UserScr ...

因为你定位的元素本身没有发生替换，实际是同一个父元素下对子元素进行了替换，可以换种思路，监听子元素的插入行为，再定位到父级：

elmGetter.each('tbody tr.el-table__row .el-table_1_column_1', column1 => {
const items_name = column1.parent();
});

复制代码

xiaooooooo · 发表于 2023-6-7 11:29:05

cxxjackie 发表于 2023-6-6 22:42
因为你定位的元素本身没有发生替换，实际是同一个父元素下对子元素进行了替换，可以换种思路，监听子元素 ...

谢谢大佬这个代码我尝试了一下似乎没有出现对应的效果
可否再另外请教您一个元素定位的问题？就是我下面写的这个路径定位不到对应的文本是什么原因？就是我打印这个dataList出来是空白的
var xuhao = $(items_name).find('td.el-table_1_column_1 div.cell div').text();
         var pizhunwenhao = $(items_name).find('td.el-table_1_column_2 div.cell p').text();
         var chanpinmingcheng = $(items_name).find('td.el-table_1_column_3 div.cell p').text();
         var shengchandanwei = $(items_name).find('td.el-table_1_column_4 div.cell p').text();
         var yaopinbenweima = $(items_name).find('td.el-table_1_column_5 div.cell span span div.el-popover__reference').text();
         var xiangqing = $(items_name).find('td.el-table_1_column_6 div.cell button span').text();

cxxjackie · 发表于 2023-6-7 21:08:31

xiaooooooo 发表于 2023-6-7 11:29
谢谢大佬这个代码我尝试了一下似乎没有出现对应的效果
可否再另外请教您一个元素定位的问题？就是我下面 ...

这网站有点怪，我昨天测试的时候还能抓到元素插入的，今天又变成文本修改了，虽然有可能通过监听其他元素来实现，不过不太好找切入点，直接双管齐下了：

function getDataList(p) {
const items_name = p.parents('tr.el-table__row').eq(0);
return {
'xuhao': items_name.find('td.el-table_1_column_1').text(),
'pizhunwenhao': items_name.find('td.el-table_1_column_2').text(),
'chanpinmingcheng': items_name.find('td.el-table_1_column_3').text(),
'shengchandanwei': items_name.find('td.el-table_1_column_4').text(),
'yaopinbenweima': items_name.find('td.el-table_1_column_5').text(),
'xiangqing': items_name.find('td.el-table_1_column_6').text()
};
}
elmGetter.selector($);
elmGetter.each('.el-table_1_column_5 p', p => {
const dataList = getDataList(p);
console.log(dataList);
});
const MutationObserver = window.MutationObserver || window.WebkitMutationObserver || window.MozMutationObserver;
const observer = new MutationObserver(mutations => {
for (const mutation of mutations) {
const parentNode = $(mutation.target.parentNode);
if (parentNode.is('.el-table_1_column_5 p')) {
const dataList = getDataList(parentNode);
console.log(dataList);
}
}
});
observer.observe(document, {subtree: true, characterData: true});

复制代码

这个库我有考虑过做文本监听，就是不好解决“在监听文本修改的回调函数中修改文本会陷入死循环”这种问题，所以一直搁置，可能后面我想到了什么解决方案再加进来。

xiaooooooo · 发表于 2023-6-8 02:10:57

cxxjackie 发表于 2023-6-7 21:08
这网站有点怪，我昨天测试的时候还能抓到元素插入的，今天又变成文本修改了，虽然有可能通过监听其他元素 ...

it works!
谢大佬好强待我消化一下这一堆语法

xiaooooooo · 发表于 2023-6-10 15:54:51

本帖最后由 xiaooooooo 于 2023-6-10 18:48 编辑

cxxjackie 发表于 2023-6-4 22:30

大佬我可以在这个问题的基础上追问一个吗？还是这个网站

// @match       https://wenshu.court.gov.cn/website/wenshu/*
// @require    http://cdn.bootcss.com/jquery/1.11.2/jquery.js
// @require    https://scriptcat.org/lib/513/2.0.0/ElementGetter.js
// @grant       GM_xmlhttpRequest

// ==/UserScript==

(function() {
'use strict';

elmGetter.selector($);
elmGetter.each('div.detailBox div.item_table', company_name => {
      console.log(company_name);
      console.log('page is fully loaded');
      console.log('xx');
      var dataList = [];
      for (var i=0; i<company_name.length; i++){
         var title = $(company_name).find('div.PDF_title').text();
         var casenumber = $(company_name).find('div.ahdiv').text();
         var judgedate = $(company_name).find('tbody tr')[1].find('td')[1].text();
         var casecontent = $(company_name).find('div.PDF_pox div').text();
         dataList.push({
            'title': title,
            'casenumber': casenumber,
            'judgedate': judgedate,
            'casecontent':casecontent
         });
      }
      console.log(dataList);
});
// Your code here...
})();

本来我一开始想用elmGetter.get的，因为并不需要循环列表，但是获取不到内容，只能又套用elmGetter.each的写法，也没有获取到dataList，可否指点我一下？
另：请问这种元素监听有没有好的调试方法？感觉我每次都是硬套框架也不是个办法

至今就没成功过几个

cxxjackie · 发表于 2023-6-10 23:18:38

本帖最后由 cxxjackie 于 2023-6-10 23:23 编辑

xiaooooooo 发表于 2023-6-10 15:54
大佬我可以在这个问题的基础上追问一个吗？还是这个网站

// @match https://wenshu.court.gov.cn ...

你这个代码有好几处错误：首先是选择器写的不好，item_table有3个而你只需要1个，父级太宽泛也容易出现之前说过的父级先于子级插入的情况，此时在父级中获取子级就会是空的；其次是遍历company_name时少写了i，其实库的设计中each每次只会返回1个元素，所以没有必要对其遍历，直接操作即可；最后是jQuery的下标访问返回的是元素节点而非jQuery节点，不能直接find，除非用$()套一下，或者用eq访问。代码修改后如下：

elmGetter.selector($);

elmGetter.each('.PDF_box', company_name => {

console.log(company_name);

console.log('page is fully loaded');

console.log('xx');

var dataList = [];

var title = company_name.find('div.PDF_title').text();

var casenumber = company_name.find('div#ahdiv').text();

var judgedate = company_name.find('tbody tr').eq(1).find('td').eq(1).text();

var casecontent = company_name.find('div.PDF_pox div').text();

dataList.push({

      'title': title,

      'casenumber': casenumber,

      'judgedate': judgedate,

      'casecontent':casecontent

});

console.log(dataList);

});
复制代码

这类不需要获取多次的还可以用get+数组的方式来获取，需要对选择器写法有一定了解：

elmGetter.selector($);

elmGetter.get([

'.PDF_box .PDF_title',

'.PDF_box #ahdiv',

'.PDF_box tr:nth-child(2) > td:nth-child(2)',

'.PDF_box .PDF_pox div',

]).then(([title, casenumber, judgedate, casecontent]) => {

const dataList = {

      'title': title.text(),

      'casenumber': casenumber.text(),

      'judgedate': judgedate.text(),

      'casecontent':casecontent.text()

};

console.log(dataList);

});
复制代码

调试的话可以用这种方式观察元素插入的情况（最好指定详细的父级以避免元素过多）：

elmGetter.selector('css');

elmGetter.each('*', document.body, el => {

console.log(el.cloneNode(true));

});
复制代码

xiaooooooo · 发表于 2023-6-11 00:04:38

cxxjackie 发表于 2023-6-10 23:18
你这个代码有好几处错误：首先是选择器写的不好，item_table有3个而你只需要1个，父级太宽泛也容易出现之 ...

谢谢非常耐心、详细的解答。

js动态加载的内容如何获取

发表回复

油中2周年

油中3周年

荣誉开发者

卓越贡献

生态建设者

挑战者 lv2