2 prolovecui Prolovecui 于 2014.12.08 00:14 提问

关于JS修改网页元素的问题

亲们,我个JS问题啊。怎样在一个元素被创建后,立即执行某个JS函数呢?

3个回答

hwx4329
hwx4329   2014.12.08 15:53
已采纳

定时判断吧,把握好开启和关闭定时器的时机和频率,还是很可行的!
给你一个类似的判断CSS加载完毕的例子:

var com_private_setInterval_id = null;
var com_private_setInterval_count = 0;

/*校验样式是否加载完毕*/
function setCssListener() {
com_private_setInterval_id = setInterval(function() {
com_private_setInterval_count++;
if ($("#isLoaded").css("height") == "1px") {
clearInterval(com_private_setInterval_id);
onCssFinish();
}
if (com_private_setInterval_count * 200 > 10 * 1000) {
clearInterval(com_private_setInterval_id);
alert("加载公共CSS超时!");
}
}, 200);
};

用的时候重写onCssFinish()就OK。

Prolovecui
Prolovecui 研究了这么久,发现还是定时判断最满足实际需要啊,虽然资源有点消耗,但还是可以接受的,还可以大致控制延迟多久修改。
接近 3 年之前 回复
BossDarcy
BossDarcy   2014.12.08 08:50

JQuery中提供了一个DOM元素插入事件 DOMNodeInserted ,我们可以通过监听这个事件来实现,这篇文章介绍了如何在a标签创建的时候执行js处理。
js设置链接为新标签打开

Prolovecui
Prolovecui DOMNodeInserted事件对于动态创建的元素貌似无效哇。。
接近 3 年之前 回复
showbo
showbo   Ds   Rxr 2014.12.08 08:56

你创建元素后直接执行代码就行了吧。。DOMNodeInsertedIntoDocument事件兼容性有问题。。

判定元素正在插入到DOM树——DOMNodeInsertedIntoDocument

showbo
showbo 回复Prolovecui: 他不是往指定的对象添加内容吗,你给那个内容容器添加这个事件就行了。如果你想偷懒就直接往body添加,但是如果有其他的带代码也添加内容到body就会触发很多次了。所以你要锁定下对象范围。
接近 3 年之前 回复
Prolovecui
Prolovecui 回复showbo: 这个是在动态元素创建时添加绑定事件,但创建那个元素的JS却无法修改,也就是不能添加监听事件。看来还是不好弄啊。
接近 3 年之前 回复
showbo
showbo 回复Prolovecui: 可以的,你要在元素创建后在绑定DOMNodeInserted事件,要不元素不存在你绑定无效 <script> window.onload = function () { document.body.innerHTML = '<div id="dv"></div>';//动态创建这个dv元素 var dv = document.getElementById('dv'); dv.addEventListener('DOMNodeInserted', function () {//绑定事件 alert('内容变更') }, false); setTimeout(function () { dv.innerHTML = new Date().toLocaleString(); }, 1000); } </script>
接近 3 年之前 回复
Prolovecui
Prolovecui 回复showbo: 试过DOMNodeInserted时间,没有效果啊,貌似其不支持动态创建的元素。
接近 3 年之前 回复
showbo
showbo 回复Prolovecui: 你要是不想兼容IE,可以使用DOMNodeInsertedIntoDocument事件,具体使用看连接里面
接近 3 年之前 回复
Prolovecui
Prolovecui 回复showbo: 的确,定时判定的确耗费资源;但onload事件却会等网页全部加载完毕后才能执行,有明显延迟,无法做到“立即”执行啊,有更好的实现吗?就是尽可能早的判定到指定元素被创建,然后执行。
接近 3 年之前 回复
showbo
showbo 回复Prolovecui: DEMO:<div id="dv"></div> <script> window.onload = function () { var dv = document.getElementById('dv'), childCount = dv.childNodes.length; setInterval(function () { if (dv.childNodes.length != childCount) { alert('dv对象节点发生改变'); childCount = dv.childNodes.length; } }, 200); //200ms检查一次 setTimeout(function () { dv.innerHTML = new Date().toLocaleString(); }, 1000); } </script>
接近 3 年之前 回复
showbo
showbo 回复Prolovecui: DOMNodeInsertedIntoDocument事件只有firefox, webkit支持,而且这个事件也将废除,所有有兼容性问题。你想要兼容ie,可以用定时器定时监视被插入对象的子元素,发生改变后触发你的事件,比较耗资源的操作。
接近 3 年之前 回复
Prolovecui
Prolovecui 元素是由别的JS动态创建的,那个JS也不能修改啊;需要独立的函数来实现判定,执行的。 DOMNodeInserted,这个事件貌似没有用啊?
接近 3 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片