江湖小栈

Do Better

0%

随机图片与一言 API 的前端小脚本简单实现

发表于 分类于 Hot°C：
本文字数： 2.4k 阅读时长 ≈ 2 分钟
随机图片与一言 API 的前端小脚本简单实现

之前分享过一次 PHP 版本的随机图片与一言，最近我想给博客保留这个功能又不想再买服务器了，所以纯前端写了一个随机取值来简单实现，虽然有点小憨，但是简单好用就行哈哈。

思路

  • 首先我想到的是在本地用数组存储数据，然后设置定时器来随机读取数据并更新到页面，但是这种方式的弊端就是每次更新数据都要重新部署博客。
  • 受之前使用 iframe 处理跨域的启发，我想到可以改用 iframe 嵌入一个页面，在此页面中使用 window.parent.postMessage('data', '*') 来向父页面推送数据，这样我们每次只需要更新此页面的文件即可，再把此页面挂到 cos 桶或其他对象存储 上即可方便且高效复刻原有的随机图片与一言功能。
  • 话不多说直接上代码

代码

嵌入页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
  <head lang="zh-cn">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>博客 API</title>
  </head>
  <body>
    <h1>Welcome</h1>
    <script>
      window.onload = () => {
        const AVATARS = [
          '/images/avatar.jpg',
          '/images/xixi.png',
          '/images/jienigui.jpg',
          '/images/yunnan.jpg',
          '/images/baoerjie.jpg',
          '/images/ruikeandmodi.jpg',
          '/images/biugle.png'
        ];
        window.parent.postMessage({ type: 'avatar', value: AVATARS[new Date().getDay()] }, '*');

        const WORDS = [
          '人闲桂花落，夜静春山空。',
          '不如意事常八九，可与言者无二三。',
          '人间有味是清欢',
          '君不见高堂明镜悲白发，朝如青丝暮成雪。',
          '南朝四百八十寺，多少楼台烟雨中。',
          '玲珑骰子安红豆，入骨相思知不知。',
          '枯藤老树昏鸦，小桥流水人家，古道西风瘦马。夕阳西下，断肠人在天涯。',
          '苟利国家生死以，岂因祸福避趋之。',
          '人生自古谁无死，留取丹心照汗青。',
          '我自横刀向天笑，去留肝胆两昆仑。',
          ...
        ];
        window.parent.postMessage(
          { type: 'word', value: escape(WORDS[Math.floor(Math.random() * WORDS.length)]) }, // 中文使用 escape 编码防止乱码
          '*'
        );
        setInterval(() => {
          window.parent.postMessage(
            { type: 'word', value: escape(WORDS[Math.floor(Math.random() * WORDS.length)]) },
            '*'
          );
        }, 10000);

        window.parent.postMessage(
          { type: 'image', value: `/img/cdn/dev/avatar/${Math.floor(Math.random() * 50) + 1}.png` },
          '*'
        );
        setInterval(() => {
          window.parent.postMessage(
            { type: 'image', value: `/img/cdn/dev/avatar/${Math.floor(Math.random() * 50) + 1}.png` },
            '*'
          );
        }, 30000);
      };
    </script>
  </body>
</html>

父页面监听处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
window.addEventListener('message', (e) => {
  const value = unescape(e.data.value);
  switch (e.data.type) {
    case 'word':
      // do something
      break;
    case 'image':
      // do something
      break;
    case 'avatar':
      // do something
      break;
  }
});
相关推荐
bulb