天天看點
傳回

js的innerHTML及jquery的html() 在ie下不相容“未知運作時錯誤” 的解決方案最終效果：

今天在給學生處做一個需求頁面寫一個計時插件時，遇到了html()在ie下相容性問題

先看代碼：

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="bootstrap.min.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<title>必讀說明</title>
<script>
	$(document).ready(function(){
		var count = 3; 
		var countdown = setInterval(CountDown, 1000); 

		function CountDown() { 
			//alert(count);
			document.getElementById("jishiqi").text =count;
			//$("#aaa").html(function(n){return count;});
			if (count == 0) {
				$("#button1").removeAttr("disabled");
				$("#button1").html("進入測評");
				clearInterval(countdown); 
				$("#button1").bind('click',function(){window.location="http://202.194.48.120/psy/"}); 
			} 
			count--;
	  	};
	});
</script>
</script>
</head>
<body style = "margin:0 auto">
	<div style = "margin:0 auto;width:960px;height:aotu;">
		<div style = "margin:0 auto;height:auto;">
			<img style = "width:100%;" src="read.png" alt="說明">
		</div><!-- / -->
	</div>
	
		<p style = "position:relative;bottom:300px;left:45%;"><button id ="button1" class="btn btn-large btn-block btn-primary"disabled="disabled" type="button">請認真閱讀(<lable id ="jishiqi">120</lable>)</button></p>
	
</body>
</html>

以為是jquery的html()不相容ie；換成了innerHtml還是不行。網上搜了下：

找到了原因：原來是我在button裡面插入了span，button不能作為span的容器。

簡單的将代碼修改了下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="bootstrap.min.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<title>必讀說明</title>
<script>
	$(document).ready(function(){
		var count = 3; 
		var countdown = setInterval(CountDown, 1000); 

		function CountDown() { 
			//alert(count);
			//document.getElementById("jishiqi").text =count;
			$("#button1").html("請認真閱讀(" +count+")");
			if (count == 0) {
				$("#button1").removeAttr("disabled");
				$("#button1").html("進入測評");
				clearInterval(countdown); 
				$("#button1").bind('click',function(){window.location="http://202.194.48.120/psy/"}); 
			} 
			count--;
	  	};
	});
</script>
</script>
</head>
<body style = "margin:0 auto">
	<div style = "margin:0 auto;width:960px;height:aotu;">
		<div style = "margin:0 auto;height:auto;">
			<img style = "width:100%;" src="read.png" alt="說明">
		</div><!-- / -->
	</div>
	
		<p style = "position:relative;bottom:300px;left:45%;"><button id ="button1" class="btn btn-large btn-block btn-primary"disabled="disabled" type="button">請認真閱讀(120)</button></p>
	
</body>
</html>

最終效果：
js的innerHTML及jquery的html() 在ie下不相容“未知運作時錯誤” 的解決方案最終效果：

js 浏覽器相容 IE相容
上一篇: innerHTML 引發“未知的運作時錯誤”
下一篇: innerHTML IE bug未知的錯誤

繼續閱讀