javascript - 如何在 AppleScript 中使用 javascript 返回聊天室中的用户列表

Question

尝试返回聊天室中的用户列表。 HTML 看起来像:

<div class="users-list" style="height: 475px; display: block;">

扩展为:

<div class="text" data-nick style="float:right">...</div>
<div class="text" data-nick="user1">...</div>
<div class="text" data-nick="user2">...</div>
<div class="text" data-nick="user3">...</div>
<div class="text" data-nick="user4">...</div>

使用 Google Chrome 中的 javascript 控制台，我这样做:

document.body.querySelector("div.users-list")

返回原始未展开的 HTML:

<div class="users-list" style="height: 475px; display: block;">

JavaScript 控制台中有一个下拉箭头可以展开它，返回用户列表:

<div class="text" data-nick style="float:right">...</div>
<div class="text" data-nick="user1">...</div>
<div class="text" data-nick="user2">...</div>
<div class="text" data-nick="user3">...</div>
<div class="text" data-nick="user4">...</div>

我想做的是将用户列表写入文本文件。我尝试在 Bash 中使用 osascript 执行此操作:

osascript -e \
'tell application "Google_Chrome"
    tell window 1
        tell active tab
            execute javascript "document.body.querySelector(\"div.users-list\")"
        end tell
    end tell
end tell'

但是当我在终端中运行它时，它返回一个空行。当我在脚本编辑器中将其作为 AppleScript 运行时，它仅返回 {}

如何在 AppleScript/osascript 中使用 javascript "document.body.querySelector(\"div.users-list\")" 返回使用 javascript 返回的相同扩展用户列表谷歌浏览器中的控制台？

Answer 1

Element.querySelector不返回字符串(HTML 或其他)；它返回 Element目的。 Chrome 在控制台中使用文本呈现此内容，但 AppleScript/osascript 可能会以不同的方式呈现它，或者根本不呈现。

您可能需要考虑使用innerHTML ，它以字符串形式返回内容的 HTML:

execute javascript "document.body.querySelector(\"div.users-list\").innerHTML"

<小时/>

由于字符串数组有适当的渲染，我们可以使用 Array.prototype.map 将 div.users-list 的每个子项映射到某个字符串。方法:

execute javascript "[...document.querySelector(\"div.users-list\").children].map(x => x.outerHTML)"

(这也使用 spread syntax 和 arrow functions :

<小时/>

当然，您也可以从 map 中的每个子 div 中提取信息并返回该信息。以下使用dataset读取 HTML5 data-* 属性:

execute javascript "[...document.querySelector(\"div.users-list\").children].map(x => x.dataset.nick)"

将输出:

user1, user2, user3, user4