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

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

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

无标题文档

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title></title>

<style type="text/css">

a:hover span{font-weight:bold;color:#F00}

</style>

</head>

<body>

<a href="#" rel="external nofollow" >鼠标移过来看看这个网址是否变颜色:<span>www.jb51.net</span></a>

</body>

</html>

另存为

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

下面是实现功能的JS代码

function doSave(obj) {

obj=document.getElementById('obj');

if (isIE()){//IE浏览器保存文本框内容

var winname = 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');

}

}

function saveAs(obj,filename){//chrome,火狐等现代浏览器保存文本框内容

var a=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();

}

function isIE()//判断浏览器类型

{

if(!!window.ActiveXObject || "ActiveXObject" in window)

return true;

else

return false;

}

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

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值