前端Javascript encode/decode代码

linkincsdn

2013-07-04

<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

decode javascript html代码前端 meta