×
文章路径: WEB前端 > JS

ajax load content .ready

发表于1年前(Jul 12, 2016 11:07:51 AM)  阅读 596  评论 0

分类: WEB前端 JS

标签: load .ready

ajax load方法是常用的加载页面的方法,特别是对于SPA单页面应用来说,几乎每个应用都是通过ajax load进行展示的。document.ready方法也是经常使用的方法,document.ready方法将会在document的dom元素加载完成的时候执行。ajax load和document.ready两者结合在一起会发生什么事呢。

假设有A,B两个页面,A页面ajax load B页面,B页面想在页面内容加载完,即document.ready事件里面执行一段方法,能正常执行成功吗。

这时候,结果取决于B页面的元素内容,B页面是一个新的document,还是原来的document。如果是一个新的document,即页面内容包含html节点,document.ready会正常执行,因为这个document是当前新的document。如果当前页面没有包含html节点,document.ready方法会立马执行,因为这个document是旧的document,而旧的document早已ready,所以这时候可能就不是你期望的执行顺序了。

我们来看实际的例子。

A页面:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jQuery-2.1.4.min.js"></script>
</head>
<body>
<div id="div1"></div>
<script>
$(document).ready(function(){
	$("#div1").load("b.html");
});
</script>
</body>
</html>
B页面:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jQuery-2.1.4.min.js"></script>
</head>
<body>
<script>
	$(document).ready(function(){
		alert("aaa");
	});
	alert("bbb");
</script>
</body>
</html>
这属于两个document的情况,会先alert("bbb"),再alert("aaa"),我们看页面源码:

<html><head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jQuery-2.1.4.min.js"></script>
</head>
<body>
<div id="div1">


<meta charset="UTF-8">
<title>Insert title here</title>
<script src="jQuery-2.1.4.min.js"></script>


<script>
	$(document).ready(function(){
		alert("aaa");
		
	});
	alert("bbb");
</script>

</div>
<script>
$(document).ready(function(){
	$("#div1").load("b.html");
	
});
</script>

</body></html>
源码里面实际上是只有一个html标签的,浏览器最后将两个html合并了,实际上最后只有一个document了。

我们再看另外一种情况,B页面改成这样:

<script>
	$(document).ready(function(){
		alert("aaa");
		
	});
	alert("bbb");
</script>
去掉html标签,只包含实际有效的内容,这样会先alert("aaa"),然后alert("bbb"),实际上,document.ready这句已经是多余的了。因为外面的document已经ready,即A页面已经加载完了。

一般来说,我们会尽量保证一个页面只有一个html元素,这时会经常出现后面这种情况,即document.ready失效,这应该引起我们的注意。

发表评论