dom监听属性的变化

来源：互联网发布：制版软件编辑：程序博客网时间：2024/05/19 03:29

方法一，，兼容火狐，opero不支持chrome

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="box" title="123" style="height: 30px;width: 100px;"></div>
<button id="btn">修改特性</button>
<script>
var box=document.getElementById("box");
var btn=$("#btn");
box.addEventListener('DOMAttrModified',handler);
function handler(e){
alert("change")
e = e || event;
box.innerHTML = e.type;
}
btn.on("click",function(){
debugger
$("#box").attr('title','abc');
})

</script>
</body>
</html>

方法二运用定时器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<iframe src="" id="some-id"></iframe>
<button>点我</button>
<script type="text/javascript">
/*

依赖jquery
*/
$("button").on("click",function(){
$("#some-id").attr("src","ces.html");//模拟iframe src的变化
});
var org=$("#some-id").attr("src");//设置全局变量进行比较
var jianting=setInterval(function(){
var txt=$("#some-id").attr("src");//局部变量反复获取
// 要监听元素
console.log(txt)
if(txt!==org){//检测变化
org=txt;
window.location.href=txt;//跳转src地址
//alert("changed");
clearInterval(jianting);//只监听一下次变化就用这个,不用就去掉
}
},10);
</script>
</body>
</html>

方法三 es5 异步监听当dom加载完以后执行

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MutationObserver</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<input type="button" name="" value="iframe" onclick="window.frames['some_one'].MyNext()">
<ul id="container">
<div id="my_element" title="ww"></div>
</ul>
<iframe name="some_one" id="some_one" src="ces.html"></iframe>
<button>点我</button>
<script type="text/javascript">
var txt=$("#some_one").attr("title")
var callback=function(){
var box=$("#some_one").attr("src");
if(txt!==box){
txt=box;
window.location.href=txt;
}

};
var mutationObserver=new MutationObserver(callback);
var otpions={
"childList" : true,//子节点的变动
"attributes" : true,//属性的变动
"characterData" : true,//节点内容或节点文本的变动
"subtree" : true,//所有后代节点的变动
"attributeOldValue" : true,//表示观察attributes变动时，是否需要记录变动前的属性
"characterDataOldValue" : true//表示观察characterData变动时，是否需要记录变动前的值

};
var target=document.querySelector('#some_one');
mutationObserver.observe(target,otpions);
// var arr=mutationObserver.takeRecords();
// console.log(arr);
window.onload=function(){
$("button").on("click",function(){
$("#some_one").attr("src","ces.html");
// $("#my_element").append("<span>新增</span>");
});

};

</script>

</body>
</html>

阅读全文

1 0