通过js注入实现单页面显示多条“一言”
温馨提示：
本文最后更新于 2018年03月16日，已超过 2,472 天没有更新。若文章内的图片失效（无法正常加载），请留言反馈或直接联系我。
Hitokoto·一言是一个挺有意思的项目，官方的自我介绍如下：
一言网(Hitokoto.cn)创立于2016年，隶属于萌创Team，目前网站主要提供一句话服务。
动漫也好、小说也好、网络也好，不论在哪里，我们总会看到有那么一两个句子能穿透你的心。我们把这些句子汇聚起来，形成一言网络，以传递更多的感动。如果可以，我们希望我们没有停止服务的那一天。
简单来说，一言指的就是一句话，可以是动漫中的台词，也可以是网络上的各种小段子。
或是感动，或是开心，有或是单纯的回忆。来到这里，留下你所喜欢的那一句句话，与大家分享，这就是一言存在的目的。
一言API如下：点击链接查看一言API
本站目前选用的JS版api
<script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>本文的主要目的就是：“在同一个页面中的多个地方同时显示一言”。
比如，我按照下方方式调用api，则并不能达到预想的结果（所有class为hitokoto的元素内容填充为“一言”）
<script src="https://v1.hitokoto.cn/?encode=js&select=.hitokoto" defer></script>首先访问上方js链接看一下“一言”的js版API内容，如下
(function hitokoto() {
var hitokoto = "腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。";
var dom = document.querySelector('.hitokoto');
Array.isArray(dom) ? dom[0].innerText = hitokoto : dom.innerText = hitokoto;
})()读一下js源码，api返回的是一个js自执行函数，通过url赋值的select参数获取对应的dom元素进行赋值。但是api中限定了不管querySelector('xx')匹配到多少条记录，只会对第一条记录进行赋值操作（Array.isArray(dom)）。
那么要如何才能实现“在同一个页面中的多个地方同时显示一言”的功能？下面就是今天的重点内容：JS注入
首先我稍微改变一些api的select参数，最终结果如下
<script src="https://v1.hitokoto.cn/?encode=js&c=d&select=.hitokoto%27);dom=$('.hitokoto');for(var i=0;i<dom.length;i%2B%2B){dom[i].innerText=hitokoto;}})()//" defer></script>主要就是“.hitokoto%27);dom=$('.hitokoto');for(var i=0;i<dom.length;i%2B%2B){dom[i].innerText=hitokoto;}})()//”这一段内容。
先来解释下这段代码的含义：
呸，没啥好解释的，简单暴力点，直接将src的链接copy到地址栏，回车查看内容！![[污]](http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/3c/pcmoren_wu_org.png)
(function hitokoto() {
var hitokoto = "只是，想要做些什么而已。 觉得不做些什么就会死掉而已。";
var dom = document.querySelector('.hitokoto');
dom = $('.hitokoto');
for (var i = 0; i < dom.length; i++) {
dom[i].innerText = hitokoto;
}
})() //');Array.isArray(dom)?dom[0].innerText=hitokoto:dom.innerText=hitokoto;})()![[偷笑]](http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/19/heia_org.gif)
看到这一步，各位明白刚开始那个问题是如何解决的了吧？通过JS注入直接将原API的函数修改掉了。现在再去试一下，在页面中定义多个相同class的“一言”容器，功能已经实现。
没图不BB，如下
看到这个可能会有人说：你这不是脱了裤子fp，多此一举么？为啥不定义多个不同的容器，然后多次调用api不就完了？再不行你换种api调用就是喽！![[允悲]](http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/2c/moren_yunbei_org.png)
呵呵了个呵呵...
正文到此结束
- 本文标签： JS
- 本文链接： https://zhyd.me/article/86
- 版权声明： 本文由张亚东原创发布，转载请遵循《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
热门推荐
相关文章
关于我
张亚东博客
一个程序员的个人博客，心之所向，无所不能
近期评论
-
来自： JustAuth于2019年7月21日正式喜提码云【GVP 】称号
-
来自： 留言板
-
来自： 暴露真实IP真的没关系吗？
-
来自： 留言板
-
来自： 留言板