为什么ie浏览器打开时某些js效果不出来,其他浏览器都正常,提示DOM7011: 此页上的代码禁用了反向和正向缓存,怎么回事儿?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#leftDiv{
width:185px;
height:300px;
border:1px solid lightgray;
float: left;
margin: 10px;
}
p{
margin: 0;
padding: 0;
}
#middleDiv{
width: 40px;
height:300px;
float: left;
padding-top: 20px;
}
button{
margin-top:20px;
}
#rightDiv{
width:185px;
height: 300px;
border:1px solid lightgray;
float: left;
margin:10px;
}
.selected{background-color: green;}
</style>
<script>
window.onload=function()
{
var bigDiv=document.getElementById("bigDiv");
var leftDiv=document.getElementById("leftDiv");
var middleDiv=document.getElementById("middleDiv");
var rightDiv=document.getElementById("rightDiv");
var moveBtn=document.getElementById("moveBtn");
var moveAllBtn=document.getElementById("moveAllBtn");
var backBtn=document.getElementById("backBtn");
var backAllBtn=document.getElementById("backAllBtn");
var p=bigDiv.getElementsByTagName("p");
for(var i=0;i< p.length;i++)
{
var pElements=p.item(i);
//鼠标移到列表,背景颜色改变,移去时消失
pElements.onmouseover=function(){
this.style.backgroundColor="lightgreen";
}
pElements.onmouseout=function(){
this.style.backgroundColor=null;
}
//单击时选中,再次单击回到原来的状态
pElements.onclick=function(){
if(this.className=="selected")
{
this.className=null;
}else{
this.className="selected";
}
}
//鼠标双击时列表被移到另一个div里面
pElements.ondblclick=function(){
if(this.parentNode.id=="leftDiv"){
rightDiv.appendChild(this);
}else{
leftDiv.appendChild(this);
}
}
}
//给按钮添加效果
//点击向右移动按钮时,被选中的列表被移到右侧,并且选中状态消失
moveBtn.onclick=function(){
var p=leftDiv.getElementsByTagName("p");//因为是向右移动,所以要从左边的div里获取p元素
for(var i=0;i< p.length;i++){
var pElements= p.item(i);
if(pElements.className=="selected")
{
rightDiv.appendChild(pElements);
pElements.className=null;
i--;
}
}
}
//点击向左移动按钮时,被选中的列表被移到左侧,并且选中状态消失
backBtn.onclick=function(){
var p=rightDiv.getElementsByTagName("p");
for(var i=0;i< p.length;i++){
var pElements= p.item(i);
if(pElements.className=="selected")
{
leftDiv.appendChild(pElements);
pElements.className=null;
i--;
}
}
}
//点击全部右移按钮时,左侧所有的元素全部被移到右侧
moveAllBtn.onclick=function(){
var p=leftDiv.getElementsByTagName("p");
while(p.length>0){
var pElements= p.item(0);
rightDiv.appendChild(pElements);
pElements.className=null;
}
}
//点击全部左移按钮时,右侧所有的元素全部被移到左侧
backAllBtn.onclick=function(){
var p=rightDiv.getElementsByTagName("p");
while(p.length>0){
var pElements= p.item(0);
leftDiv.appendChild(pElements);
pElements.className=null;
}
}
}
</script>
</head>
<body>
<div id="bigDiv">
<div id="leftDiv">
<p>蛋蛋</p>
<p>曹儿</p>
<p>咸咸</p>
<p>传小艳</p>
</div>
<div id="middleDiv">
<button id="moveBtn">>></button>
<button id="moveAllBtn">>>></button>
<button id="backBtn"><<</button>
<button id="backAllBtn"><<<</button>
</div>
<div id="rightDiv"></div>
</div>
</body>
</html>
IE9及以下版本的BUG,innerHTML不能作用于table,select元素,但是可以作用于div等元素,所以你可以产生整个select,然后插入到div中。