好资源导航 » 文章资讯 » js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器原创

js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器原创

2023-09-16 08:52:06 71

很多网站实现了利用JS保存页面中文本框内容到本地，并另存为指定文件扩展名与编码类型的功能，特别是一些代码教程，JS特效站上更是长见。如何利用JS实现这种功能的呢，下面给出了具体的实现代码

首先建立HTML文件，具体代码如下





无标题文档




<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">
<title></title>
<styletype="text/css">
a:hoverspan{font-weight:bold;color:#F00}
</style>
</head>
<body>
<ahref="#"rel="externalnofollow">鼠标移过来看看这个网址是否变颜色：<span>www.nhooo.com</span></a>
</body>
</html>

另存为

页面中包含一个textarea文本框和一个button按钮，点击按钮时把文本框中内容另存为code.html

下面是实现功能的JS代码


functiondoSave(obj){
	obj=document.getElementById('obj');
	if(isIE()){//IE浏览器保存文本框内容
	varwinname=window.open('','_blank','top=10000');
	winname.document.open('text/html','replace');
	winname.document.writeln(obj.value);
	winname.document.execCommand('saveas','','code.htm');
	winname.close();}
	else{
		saveAs(obj,'code.html');
	}
}
functionsaveAs(obj,filename){//chrome,火狐等现代浏览器保存文本框内容
	vara=document.createElement('a');
	a.setAttribute('href','data:text/html;gb2312,'+obj.value);
	a.setAttribute('download',filename);
	a.setAttribute('target','_blank');
	a.style.display="none";
	obj.parentNode.appendChild(a);
	a.click();
}

functionisIE()//判断浏览器类型
{
if(!!window.ActiveXObject||"ActiveXObject"inwindow)
returntrue;
else
returnfalse;
}

在IE下利用了JS的execCommand的功能而在chrome等现代浏览器下这个功能的没有saveas所以我们只能通过超链接标签的一些特性来实现保存功能了，代码中的文件名与扩展名都可以随意更改，如有问题你即时反馈我们

返回顶部
514930285
czq8825@qq.com

js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器 原创

热门推荐

随机推荐

js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器原创