逃离IE日记。

Henry.6

已于 2023-07-31 22:49:12 修改

阅读量220

点赞数

文章标签：前端

于 2023-07-27 23:01:41 首次发布

本文链接：https://blog.csdn.net/6rl/article/details/131970198

版权

文章讲述了从IE浏览器到现代浏览器的代码转换过程中，如何处理同级框架互访、反选checkbox、获取checkbox值以及创建元素等场景。在IE中的一些特性在现代浏览器中不再适用，需要使用新的API和方法进行适配，以保证代码的兼容性和效率。

摘要由CSDN通过智能技术生成

第一天：

场景1修改：

同级框架互访

IE支持window.parent.{frame名} 这种方式来访问兄弟frame的内容，如：

父页面有以下内容：

<iframe name="brother1" src="brother1.html"></iframe>
<iframe name="brother2" src="brother2.html"></iframe>

我在brother2页面下访问frame名为brother1的内容：

//IE下的写法当时如蜜糖，现在对改版的我们如毒药
window.parent.brother1.document

//现代浏览器的写法
window.parent.frames['brother1'].document

第二天：

场景1修改：

反选checkbox中已经选择的选项。

IE可以直接通过checkbox的name来直接获取同名checkox

代码如下：

<input type="checkbox" name="c_group" value="123" checked />123<br/>
<input type="checkbox" name="c_group" value="456" checked />456<br/>

//实现反选功能
//IE可以在window对象下直接找到name相关的的控件，IE语法糖

for(var i=0; i< c_group.length; i++) {
    window.c_group[i].checked = !window.c_group[i].checked;

}


//现代浏览器通过querySelectorAll来查找
let list =document.querySelectorAll('input[name=c_group]:checked');
Array.prototype.forEach.call(list ,function(val){
    val.checked = !val.checked;
})

第三天：

场景1修改：

获取checkbox中已经选择的值。

IE可以直接通过checkbox的value来直接获取同名checkox的

代码如下：

<input type="checkbox" name="c_group" value="123" checked />123<br/>
<input type="checkbox" name="c_group" value="456" checked />456<br/>

//实现取值功能
//IE可以在window对象下通过同名的name返回一个元素列表，在这些列表来直接访问value来取值，IE语法糖
var value='';
for(var i=0;i< window.c_group.length; i++){
   value += window.c_group[i].value + ',';
}
if(value != ''){
  value = value.substr(0,value.length-1);
}



//现代浏览器通过querySelectorAll来查找
let list =document.querySelectorAll('input[name=c_group]:checked');
let value= Array.prototype.map.call(list ,function(val){
    return val.value;
}).join(',')

第四天：

场景1修改：

创建元素。

IE可以直接通过完整的html标签内容来创建元素，但现代浏览器会直接报错

代码如下：

//IE的代码，创建复选框元素
 var o_checkbox = document.createElement('<input type="checkbox" name="c_group" value="123">');


//现代浏览器执行上面的代码会直接报错，createElement的参数只能填元素名称
  var ocheckbox = document.createElement('input');
  ocheckbox.setAttribute("type", "checkbox");  
  ocheckbox.setAttribute("name", "c_group");  
  ocheckbox.setAttribute("value", "123");

场景2修改：

innerHTML的设置。

IE可以直接通过setAttribute方法来设置元素的内部HTML内容，但现代浏览器这样做是创建元素的属性。

代码如下：

//IE代码，通过setAttribute方法来设置td内部的html内容，可以保持代码一致
var td = document.createElement("td");
td.setAttribute("innerHTML",'张三');	
td.setAttribute("bgColor","#FFFFFF");	


//现代浏览器，直接使用innerHTML属性直接赋值。
var td = document.createElement("td");
 td.innerHTML = '张三';	
 td.setAttribute("bgColor","#FFFFFF");

第五天：

场景1修改：

alert 提示

这个是浏览器的提示函数。但容易被拦截，界面也比较朴素，不同浏览器界面不统一；使用第三方的UI控件，界面上就美观好多，界面也统一，需要用promise配合使用来避免地狱回调。

代码如下：

//基于jquery-esayui库
//定义一个全局的alert函数
$.messager.alertPromise=function(msg){
		
	var p = new Promise(function(resolve, reject){
        //做一些异步操作
			window.parent.parent.$.messager.alert('系统提示',msg,'info',resolve);
	});
	return p; 
}


//使用例子，判断文本框为空，则提示一下，再焦点在文本框中。
if($('#content').val() === ""){
    $.messager.alertPromise("有可能要断更了！").then(function(){$('#content').focus();});		
	return false;
}

场景2修改：

confirm提示

这个是浏览器的确认提示函数。跟alert一样，界面也比较朴素，不同浏览器界面不统一；使用第三方的UI控件，界面上就美观好多，界面也统一，需要用promise配合使用来避免地狱回调。

代码如下：

//基于jquery-esayui库
//定义一个全局的alert函数
$.messager.confirmPromise=function(msg){
		
	
	var p = new Promise(function(resolve, reject){
        //做一些异步操作
			window.parent.parent.$.messager.confirm('系统提示',msg,resolve);
	});
	return p; 

}


//使用例子，在清空文本框前，提示用户是否确认清空文本框。
$.messager.confirmPromise("是否要清空这个文本框?")
				.then(function(data) {
    $('#content').val('');
})