原创

通过js注入实现单页面显示多条“一言”

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到地址栏,回车查看内容![污]

(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;})()

[偷笑]看到这一步,各位明白刚开始那个问题是如何解决的了吧?通过JS注入直接将原API的函数修改掉了。现在再去试一下,在页面中定义多个相同class的“一言”容器,功能已经实现。

没图不BB,如下

看到这个可能会有人说:你这不是脱了裤子fp,多此一举么?为啥不定义多个不同的容器,然后多次调用api不就完了?再不行你换种api调用就是喽![允悲]

呵呵了个呵呵...

正文到此结束
Loading...