获取异步加载的元素

文章目录

1. 1. 案例
   1. 1.1. 失败的方法
   2. 1.2. 改进

在html中，JS是同步进行的，但有一些元素是异步获取的。

说如果想用js对这个元素进行加工，普通方法是获取不到这个元素的，因为JS代码运行时，这个元素还未加载。

案例

由于来比利的载入速度还是不太理想，本博客决定引入了”qingqing”的评论系统。

安装很简单，根据官方的说法，只要把以下代码贴到合适的位置就行了

<div id="plus" style="text-align: left"></div>
<script src="https://qingqing.com/static/js/plus.js"></script>

然后，发现它的默认评论接口是这样的：

美观性倒是不说了，关键是用户完全不知所云，所以就开始对它着手进行改造

失败的方法

直接添加一段js代码：

<script>
    var node = document.getElementById('plus').getElementsByTagName('b')[0];
    node.innerHTML = '评论此文';
</script>

控制台报错：node的值是undefined

这时才突然意识到这是一个异步的加载。。。真是蠢得可以

改进

知道了关键所在，就好办多了。我这里采用的是一个闭包+定时器自检的方案。

<script>
    (function setInner() {
        var node = document.getElementById('plus').getElementsByTagName('b')[0];
        var timer = setTimeout(function() {
            if(!node) {
                setInner();
            } else {
                node.innerHTML = '评论此文';
                document.getElementById('plus').style.paddingLeft = '3%';
            }
        }, 300);
    })();
</script>

PS：关于此类问题，方案其实很多，欢迎讨论

然后再甩一套标准的hexo三连：(清缓存+编译+部署)

hexo clean
hexo g
hexo d

刷新浏览器，改造完成！