`

前端Javascript encode/decode代码

 
阅读更多 
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

</head>
<body>
	<input type="text" id="input" value="中文">
	<input type="button" id="btn" value="urlencode">
	<select id="charset">
		<option value="gbk">gbk</option>
		<option value="big5">big5</option>
		<option value="utf-8">utf-8</option>
	</select>
	<div>
		编码结果：
		<textarea style="display: block" id="output"></textarea>
	</div>
	<div>
		解码： <input type="button" id="deBtn" value="urldecode">
		<textarea style="display: block" id="outputDecode"></textarea>
	</div>
	<!--<img src="data:text/javascript;charset=gbk,window.a='%D6%D0%CE%C4'" id="d">-->
	<!--<script charset="gbk" src="data:text/javascript;charset=gbk,alert('%CE%C4')"></script>-->
	<script>
		/*
		var s=document.createElement('script');
		s.charset='gbk';
		var src=document.getElementById('d').src;
		alert(src);
		s.src=src;
		document.body.appendChild(s);
		setTimeout(function(){
			alert(window.a)
		},300)
		*/
		function urlencode(str, charset, callback) {
			//创建form通过accept-charset做encode
			var form = document.createElement('form');
			form.method = 'get';
			form.style.display = 'none';
			form.acceptCharset = charset;
			if (document.all) {
				//如果是IE那么就调用document.charset方法
				window.oldCharset = document.charset;
				document.charset = charset;
			}
			var input = document.createElement('input');
			input.type = 'hidden';
			input.name = 'str';
			input.value = str;
			form.appendChild(input);
			form.target = '_urlEncode_iframe_';
			document.body.appendChild(form);
			//隐藏iframe截获提交的字符串
			if (!window['_urlEncode_iframe_']) {
				var iframe;
				if(document.all){
					try{
						iframe = document.createElement('<iframe name="_urlEncode_iframe_"></iframe>');
					}catch(e){
						iframe = document.createElement('iframe');
						//iframe.name = '_urlEncode_iframe_';
						iframe.setAttribute('name', '_urlEncode_iframe_');
					}
				}else{
					iframe = document.createElement('iframe');
					//iframe.name = '_urlEncode_iframe_';
					iframe.setAttribute('name', '_urlEncode_iframe_');
				}
				iframe.style.display = 'none';
				iframe.width = "0";
				iframe.height = "0";
				iframe.scrolling = "no";
				iframe.allowtransparency = "true";
				iframe.frameborder = "0";
				iframe.src = 'about:blank';
				document.body.appendChild(iframe);
			}
			//
			window._urlEncode_iframe_callback = function(str) {
				callback(str);
				if (document.all) {
					document.charset = window.oldCharset;
				}
			}
			//设置回调编码页面的地址，这里需要用户修改
			form.action = 'getEncodeStr.html';
			form.submit();
			setTimeout(function() {
				form.parentNode.removeChild(form);
				iframe.parentNode.removeChild(iframe);
			}, 500)

		}
		function urldecode(str, charset, callback) {
			var script = document.createElement('script');
			script.id = '_urlDecodeFn_';
			window._urlDecodeFn_ = callback;
			if (document.all) {
				if(navigator.userAgent.indexOf('MSIE 8')>-1){
					//对于ie8做特别hack
					var link = document.createElement('link');
					link.rel = 'stylesheet';
					link.type = 'text/css';
					link.charset = charset;
					link.href = 'data:text/plain;charset=' + charset + ',%23_decode_hidden_el_for_test_%7Bbackground-image%3Aurl(' + str + ')%7D';
					alert(link.href);
					document.body.appendChild(link);
					//然后创建一个隐藏的div，应用这个样式
					var div = document.createElement('div');
					div.id = '_decode_hidden_el_for_test_';
					div.style.display = 'none';
					document.body.appendChild(div);
					setTimeout(function(){
						callback(document.getElementById('_decode_hidden_el_for_test_').currentStyle['backgroundImage'].match(/\("data\:text\/(.+)"\)/)[1]);
						link.parentNode.removeChild(link);
						div.parentNode.removeChild(div);
					}, 300)
				}else{
					//隐藏iframe截获提交的字符串
					if (!window['_urlDecode_iframe_']) {
						var iframe;
						if(document.all){
							try{
								iframe = document.createElement('<iframe name="_urlDecode_iframe_"></iframe>');
							}catch(e){
								iframe = document.createElement('iframe');
								//iframe.name = '_urlDecode_iframe_';
								iframe.setAttribute('name', '_urlDecode_iframe_');
							}
						}else{
							iframe = document.createElement('iframe');
							//iframe.name = '_urlDecode_iframe_';
							iframe.setAttribute('name', '_urlDecode_iframe_');
						}
						//iframe.name = '_urlDecode_iframe_';
						iframe.setAttribute('name', '_urlDecode_iframe_');
						iframe.style.display = 'none';
						iframe.width = "0";
						iframe.height = "0";
						iframe.scrolling = "no";
						iframe.allowtransparency = "true";
						iframe.frameborder = "0";
						iframe.src = 'about:blank';
						document.body.appendChild(iframe);
					}
					//ie下需要指明charset，然后src=datauri才可以
					iframe.contentWindow.document.write('<html><scrip' + 't charset="gbk" src="data:text/javascript;charset=gbk,parent._decodeStr_=\'' + str + '\'"></s'+'cript></html>');
					setTimeout(function() {
						callback(_decodeStr_);
						iframe.parentNode.removeChild(iframe);
					}, 300)
				}
			} else {
				var src = 'data:text/javascript;charset=' + charset + ',_urlDecodeFn_("' + str + '");';
				src += 'document.getElementById("_urlDecodeFn_").parentNode.removeChild(document.getElementById("_urlDecodeFn_"));';
				script.src = src;
				document.body.appendChild(script);
			}
		}

		/**编码和解码
		 */
		document.getElementById('btn').onclick = function() {
			urlencode(document.getElementById('input').value, document.getElementById('charset').value, function(str) {
				document.getElementById('output').value = str;
			})
		}
		document.getElementById('deBtn').onclick = function() {
			urldecode(document.getElementById('output').value, document.getElementById('charset').value, function(str) {
				document.getElementById('outputDecode').value = str;
			})
		}
	</script>
</body>
</html>

 不能多说，demo链接 http://xueduany.github.io/KitJs/urlencode.html

 博客链接 http://www.cnblogs.com/xueduanyang/archive/2013/05/30/3108442.html

分享到：
| leetcode打怪升级系列：回文分割 II（132 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js中encode、decode的应用说明.docx

    JavaScript中的`encode`和`decode`是一组用于字符串编码解码的方法，它们在处理和传输数据时起到关键作用。在JavaScript中，常见的编码方法有`encodeURIComponent`、`decodeURIComponent`、`encodeURI`、`decodeURI`...

    js-protobuf-encode-decode-master.zip

    本项目"js-protobuf-encode-decode-master.zip"提供了一个在线工具，专门用于处理JavaScript环境下的Protobuf编码和解码操作。 Protobuf是一种由Google开发的数据序列化协议，它定义了一种二进制数据格式，比JSON...

    Javascript UrlDecode函数代码

    在给定的代码中，作者提供了两个自定义的函数：`ShengUtils.encode`和`ShengUtils.decode`，分别实现了这个功能。 `ShengUtils.encode`函数的主要任务是对输入的字符串`unzipStr`进行URL编码。它首先创建一个空字符...

    jQuery JSON with PHP json_encode and json_decode

    "jQuery JSON with PHP json_encode and json_decode"这个主题涉及到如何利用JSON（JavaScript Object Notation）这一轻量级的数据交换格式，结合PHP的`json_encode`和`json_decode`函数，实现前后端之间的数据通信...

    PHP json_encode与json_decode.rar

    在PHP中，`json_encode`和`json_decode`是两个非常重要的函数，它们主要用于JSON（JavaScript Object Notation）数据格式的编码和解码。JSON是一种轻量级的数据交换格式，因其简洁、易读且易于机器解析而被广泛应用...

    php-encode-decode

    - Base64是一种在网络上传输二进制数据的方法，使用 `base64_encode()` 和 `base64_decode()` 函数。例如，`echo base64_encode("你好，世界!");`，解码则使用 `base64_decode()`。 4. **JSON编码与解码**： - ...

    前端项目-openlocationcode.zip

    "前端项目-openlocationcode"是一个专为前端开发人员设计的JavaScript库，它实现了对OLC代码的解析和转换功能。这个库的主要功能包括： 1. **编码**：将经纬度坐标转换为OLC代码。开发者可以使用这个库来为用户的...

    base64，java与JavaScript实现

    ### 关于Base64编码及Java与JavaScript的...通过这些代码示例，开发者可以快速地集成Base64的功能到自己的应用中，无论是前端还是后端。同时，还介绍了如何配置日志输出，这对于调试和维护应用程序来说是非常重要的。

    php中json_decode()和json_encode()的使用方法.docx

    在PHP中，`json_decode()`和`json_encode()`是两个非常重要的函数，它们主要用于JSON（JavaScript Object Notation）数据格式的编码与解码。JSON是一种轻量级的数据交换格式，因其简洁、易于阅读和编写，同时也容易...

    js实现base64加密

    `jquery.base64.js`是一个jQuery插件，它提供了`.base64_encode()`和`.base64_decode()`方法，用于在JavaScript中实现Base64编码和解码。以下是如何使用这个库的例子： ```javascript // 引入jquery.base64.js ...

    Base64的JavaScript实现js-base64.zip

    base64.js 是 Base64 的 JavaScript 实现。浏览器：[removed][removed]node.jsvar Base64 = require('./base64.js').Base64;示例：Base64.encode('dankogai'); // ZGFua29nYWk= Base64.encode('小飼弾'); // ...

    Base64_javascript_base64_

    在JavaScript中，Base64的加密与解密是前端开发中的常见需求，尤其在处理图像、JSON数据或者进行跨域通信时。本文将深入探讨JavaScript中的Base64原理及其在前端应用。 一、Base64编码原理 Base64编码将每3个8位...

    前端项目-msgpack-lite.zip

    2. **引入**：在JavaScript文件中，通过`require('msgpack-lite')`或`import { encode, decode } from 'msgpack-lite'`引入解码和编码函数。 3. **编码**：使用`encode()`函数将JavaScript对象转换为MessagePack格式...

    企业IM客服系统PHP源码带安装教程.rar

    同时，可能会用到一些PHP库，如数据库连接管理的PDO、缓存管理的Redis或Memcached，以及用于处理JSON数据的json_encode/decode等。 2. **数据库设计**：一个IM客服系统需要存储用户信息、聊天记录、在线状态等数据...

    json for PHP4.0

    JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在PHP中，JSON常用于与前端交互，传输数据。PHP 4.0版本虽然相对较旧，但仍然可以处理JSON数据，只是...

    PHP经典十大案例

    PHP内置了DOM、SimpleXML和json_encode/decode等工具，用于处理XML和JSON数据。了解如何读取、创建和转换这两种数据格式，对于Web服务和API开发至关重要。 9. **缓存技术**： 使用PHP的APC、Memcached或Redis实现...

    加密解密Base64的js封装代码

    这个封装代码中，`base64Encode`函数接受一个字符串作为输入，将其转换为字节数组，再通过`btoa`进行Base64编码。`base64Decode`函数则接收一个Base64编码的字符串，先用`atob`解码，再将结果转换回原始字符串。 在...

    js的base64和base32加密函数

    import { encode as b32encode, decode as b32decode } from 'base32'; // Base64编码 let text = '你好，世界！'; let encoded64 = b64encode(text); console.log('Base64编码:', encoded64); // Base64解码 let ...

Magicbox
Global site tag (gtag.js) - Google Analytics