javascript - 将事件绑定(bind)到出现的 div

Question

我能否创建一个事件，以便在具有特定 ID 的元素变得可见或出现在页面上时执行一些 javascript？

该元素来自远程资源(因此不在我的 html 代码中，但出现在页面加载时)并且我希望一些代码在它出现时运行(并且只有当它出现时，它可能不会在每次加载时出现).

谢谢!

Answer 1

您可以创建一个函数，每隔 X 毫秒检查一次此类元素是否出现在页面上(一个普通的 Javascript 解决方案):

(​function ()​ {
    var intervalId = window.setInterval(function() {
        if (null != document.getElementById('myDivId')) {
            // the div appeared on the page
            // ... do your stuff here:
            alert('its here!');

            // optionally stop checking (obviously it's there already 
            // unless you decide to remove it)
            window.clearInterval(intervalId);
        };
    }, 100); // perform check every 100 milliseconds
}​)()​;

有可能 DIV 一直存在，只是不可见。所以你的检查功能应该有点不同:

var el = document.getElementById('myDivId');
if (null != el && (el.offsetWidth > 0 || el.offsetHeight > 0)) {

基本上 (el.offsetWidth > 0 || el.offsetHeight > 0) 表示该元素未被其或其父级的 CSS 属性隐藏。