用js修改了在线的一个页面，但是刷新后就重置啦？

Question

初衷：我是想通过js批量更改 qq群成员的昵称。

---

在群管理网页版，可以通过xpath获取到innerText。举例，比如，原文是<span>小明</span>,我在chrome的console里通过js的DOM设置了span.innerText=‘小红’,此时页面显示<span>小红</sapn>。在我本地显示正常。

---

但是！！！！！！！
一刷新页面，还是‘小明’。我想让任何user访问这个页面，看到的都是我修改过的'小红',这应该怎么设置呢？
谢谢各位！

Answer 1

看到你这个操作，我缓缓打出一个？

群昵称等用户数据是存在QQ的服务器上的，你在本地修改已经下载下来的网页当然没有用了，网页版QQ也没有这种修改群昵称的方式。

你这种试图绕过服务器对服务器上的数据进行修改的操作是不可能实现的，就像你打开网银，然后把你的余额的innerText改成一个亿，然后你就有一个亿了？你觉得这可能吗？

那么正确的做法是什么呢？网页版QQ如果有提供修改群名片的功能，那你只需要分析出这个行为并模仿这个行为，就能让服务器以为你是个普通的网页QQ客户端，完成群昵称修改的操作了。而这种行为，通常都是发送http请求，更多细节就要靠你自己慢慢研究了，不过也不要想着一步登天，先把基础打好哦

Answer 2

你问出这个问题说明对网页运行的机制还不了解哦。
我给你举个例子吧，最近我有个群里面好多群员都被改名成了群主女装，我打算批量回他们原本的名字，于是我打开了网页版的成员管理。

按照你的思路是不行的。其实没那么复杂，我们只要模拟人工的操作。比如，对于我是啥成员：

• 我会先看看他的名字，或者复制下来。
• 点击他的群名片输入框。
• 删掉原来的群主女装。
• 黏贴我是啥。
• 按一下别的地方来确认，这样就改好了。

然后我们考虑一下怎么用 JS 解决。
就像你说的一样，我们先审查元素，看到原用户昵称都放在一个有 td-user-nick 类的 td 中那个 span 元素里头。

发现这个页面可以用 JQuery，那么我们用

let $i = $(".td-user-nick>span");

获取所有成员昵称。
然后自然想到遍历这个选择器：

for (let i = 0, name; i < $i.length; i++)
{
    name = $i[i].innerText;

然后我们应该在遍历时对输入框进行操作。先找到输入框。

    let $j = $($i[i]).parent().next().find("input");

这时你很高兴，迅速写下

    $j.val(name);

按下回车运行，却发现页面没有任何变化。
再审查元素，value 却改了，什么原因呢？
这时我手动点了一下输入框，其中的内容立刻变成了刚才用 JS 更改的内容。
于是我们审查元素，发现输入框边上那个 span 有个 click 事件，于是加上这么一段：

    let $k = $j.prev();
    $k.trigger("click");
}

新的问题出现了：冒出一个弹窗，说系统繁忙。
于是我们用 setTimeout 给他间隔一些时间，免得请求过于频繁。完整代码如下：

let $i = $(".td-user-nick>span");
let edit = (i) =>
{
    if (!$i[i]) return;
    name = $i[i].innerText;
    let $j = $($i[i]).parent().next().find("input");
    let $k = $j.prev();
    $j.val(name);
    $k.trigger("click");
    setTimeout(edit, 2000, i + 1);
}
edit(0);

这样就可以啦！