web前端开发小技巧（html+js）

1.frameset

 

一个html页面内嵌入多个html页，嵌入源码如下：

Main.html

<frameset rows="100%,0,0,0,0" border="0">
	<frame src="roster.html" name="jwc_main" marginwidth="0"
		marginheight="0" scrolling="no">
	<frame src="empty.html" name="jwc_sound" marginwidth="0"
		marginheight="0" onLoad="soundLoaded();">
</frameset>

在Main.js中，如果想设置frame中的值，可以进行如下操作：

 frames["jwc_main"].document.getElementById('myNickname').innerHTML = nick; 

指明frame的name，后面的操作就如同在roster.js一样。

 

2.innerHTML

很多时候，页面的参数是应该在js中动态设置的，那么在相关html页面中，就不需要制定文本具体内容了，相关源码如下：

<span id="myNickname" class="nickName" title="Change User Info"></span> 
<span id="unit" class="unit"></span>

具体的值在相关js页面设置即可

 /* set nick */
  document.getElementById('myNickname').innerHTML = "lethe";  

  /* set unit 2012.8.8 dml@wip Notice:This value should be catch from userInfo which is stored in openfire*/
  document.getElementById('unit').innerHTML = "(ch)";  

3.div display

有的时候，一些标签触发才需要显示，这个时候，写个js方法就能解决了

<tr>
				<td valign=top><img id="toggle_icon"
					src="images/group_close.gif" width="14" height="14"
					onClick="toggle_msgbox(this);">
				</td>
				<td width="100%">
					<div id="face_tool" style="display:none"></div> <textarea id="msgbox" wrap="virtual"
						style="width:100%;height:1.4em;"
						onKeyPress="return msgboxKeyPressed(this,event);"
						onKeyDown="return msgboxKeyDown(this,event);"></textarea></td>
			</tr>

默认的时候，face_tool不显示，当点击toggle_icon的时候，触发toggle_msgbox(this)方法，显示隐藏区域

function toggle_msgbox(el) {
	if (msgbox_toggled) {
		document.getElementById('msgbox').style.height = '1.4em';
		document.getElementById('chat').style.height = '100%';
		document.getElementById('submitbutton').style.display = 'none';
		document.getElementById('face_tool').style.display = 'none';
		el.src = group_close.src;
	} else {
		document.getElementById('msgbox').style.height = '4.2em';
		document.getElementById('chat').style.height = '99%';
		document.getElementById('submitbutton').style.display = '';
		document.getElementById('face_tool').style.display = '';
		el.src = group_open.src;
	}
	msgbox_toggled = !msgbox_toggled;
}

4.top属性

OO继承思想来解决这个问题，看源码：

Main.html

<frameset rows="100%,0,0,0,0" border="0">
	<frame src="roster.html" name="jwc_main" marginwidth="0"
		marginheight="0" scrolling="no">
	<frame src="empty.html" name="jwc_sound" marginwidth="0"
		marginheight="0" onLoad="soundLoaded();">
</frameset>

roster.html

<span id="myNickname" class="nickName"
						onClick='return top.openUserInfo(top.cutResource(top.jid))'
						title="Change User Info"></span> 

这里top.openUserInfo指的是main.js中的方法，也就是调用了祖先方法；相应的，有个parent属性，是调用父亲方法。

5.页面权限控制

有的时候，一些按钮只针对特定的用户，一些text只是本人可以编辑，js里面，这个操作是很随意的，看源码：

vcard.html

<form>
    <fieldset>
      <legend>Name</legend>
      <table>
          <tr><th nowrap>Full Name:</th><td width="100%"><input type=text id="FN" class="vcardBoxEditable"></td></tr>
          <tr><th nowrap>Family Name:</th><td width="100%"><input type=text id="N.FAMILY" class="vcardBoxEditable"></td></tr>
          <tr><th nowrap>Given Name:</th><td width="100%"><input type=text id="N.GIVEN" class="vcardBoxEditable"></td></tr>
      </table>
    </fieldset>
    
    <div id="savebox">
		<hr noshade size="1" size="100%">
		<div align="right">
			<button onClick="window.close();">Cancel</button> <button onClick="return sendSub();">Save</button>
		</div>
      </div>
    </form>

vcard.js

for ( var i = 0; i < document.forms[0].elements.length; i++) {
		if (document.forms[0].elements[i].id == '')
			continue;
		if (cutResource(jid) != srcW.cutResource(srcW.jid)) {
			document.forms[0].elements[i].className = "vcardBox";
			document.forms[0].elements[i].readOnly = true;
		}
	}

	if (cutResource(jid) != srcW.cutResource(srcW.jid))
		document.getElementById("savebox").style.display = 'none';

vcard.css

.vcardBox { 
  border: 0;
  background-color: #b8dbff;
  width: 100%;
}

.vcardBoxEditable { 
  border: 1px;
  background-color: white;
  width: 100%;
}

6.初始化select信息

html中，select的option不固定，这个时候，javascript一些方法就显示其功效了。

        <select size="1" name="groupName" id="groupName">
			<option value="all" selected>全部</option>
	</select>

	var obj = document.getElementById("groupName");
	obj.options.add(new Option("测试组1","g1"));//[显示名]，[值]

7.获取同一页面name相同，选中的tag值

	<tr>
				<td><input type="radio" value="images/image1.jpg"
					name="portrait" checked="checked"></td>
				<td><img src="images/image1.jpg""></td>

				<td><input type="radio" value="images/image2.jpg"
					name="portrait"></td>
				<td><img src="images/image2.jpg""></td>

				<td><input type="radio" value="images/image3.jpg"
					name="portrait"></td>
				<td><img src="images/image3.jpg""></td>
			</tr>

	var New = document.getElementsByName("portrait");
		for ( var i = 0; i < New.length; i++) {
			if (New[i].checked) {
				portrait = New.item(i).getAttribute("value");
			}
		}

8.获取url中的参数值

	function GetRequest() {
		var url = location.search; // 获取url中"?"符后的字串
		var theRequest = new Object();
		if (url.indexOf("?") != -1) {
			var str = url.substr(1);
			strs = str.split("&");
			for ( var i = 0; i < strs.length; i++) {
				theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
			}
		}
		return theRequest;
	}

        var Request = new Object();
	Request = GetRequest();
	jid = Request['jid'];

或者

function getArgs() {
	passedArgs = new Array();
	search = self.location.href;
	search = search.split('?');
	if (search.length > 1) {
		argList = search[1];
		argList = argList.split('&');
		for ( var i = 0; i < argList.length; i++) {
			newArg = argList[i];
			newArg = argList[i].split('=');
			passedArgs[unescape(newArg[0])] = unescape(newArg[1]);
		}
	}
}

getArgs();
jid = passedArgs['jid'];

9.通过javascript配置css文件信息

style = "lethe.css"; 

// look for stylesheet
if (parent.top.stylesheet)
  style = parent.top.stylesheet;
else if (top.opener.top.stylesheet)
  style = top.opener.top.stylesheet;
else if (top.opener.opener.top.stylesheet)
	style = top.opener.opener.top.stylesheet;

document.write('<link rel="styleSheet" type="text/css" href="'+style+'">');

10.截取字符串

function cutResource(aJID) { // removes resource from a given jid
	if (typeof (aJID) == 'undefined' || !aJID)
		return;
	var retval = aJID;
	if (retval.indexOf("/") != -1)
		retval = retval.substring(0, retval.indexOf("/"));
	return retval;
}

11.标点符号encode

function msgEscape(msg) {
	if (typeof (msg) == 'undefined' || !msg || msg == '')
		return;

	msg = msg.replace(/%/g, "%25"); // must be done first
	msg = msg.replace(/\n/g, "%0A");
	msg = msg.replace(/\r/g, "%0D");
	msg = msg.replace(/ /g, "%20");
	msg = msg.replace(/\"/g, "%22");
	msg = msg.replace(/#/g, "%23");
	msg = msg.replace(/\$/g, "%24");
	msg = msg.replace(/&/g, "%26");
	msg = msg.replace(/\(/g, "%28");
	msg = msg.replace(/\)/g, "%29");
	msg = msg.replace(/\+/g, "%2B");
	msg = msg.replace(/,/g, "%2C");
	msg = msg.replace(/\//g, "%2F");
	msg = msg.replace(/\:/g, "%3A");
	msg = msg.replace(/\;/g, "%3B");
	msg = msg.replace(/</g, "%3C");
	msg = msg.replace(/=/g, "%3D");
	msg = msg.replace(/>/g, "%3E");
	msg = msg.replace(/@/g, "%40");

	return msg;
}

12.htmlEnc

function htmlEnc(str) {
	if (!str)
		return '';

	str = str.replace(/&/g, "&");
	str = str.replace(/</g, "<");
	str = str.replace(/>/g, ">");
	str = str.replace(/\"/g, """);
	return str;
}

13.判断非法输入

var prohibited = [ '"', ' ', '&', '\'', '/', ':', '<', '>', '@' ]; // invalid
// chars
function isValidJID(jid) {
	var nodeprep = jid.substring(0, jid.lastIndexOf('@')); // node name (string
	// before the @)
	for ( var i = 0; i < prohibited.length; i++) {
		if (nodeprep.indexOf(prohibited[i]) != -1) {
			alert("Invalid JID\n'" + prohibited[i]
					+ "' not allowed in JID.\nChoose another one!");
			return false;
		}
	}
	return true;
}

14.获取时间

function jabberDate(date) {
	if (!date.getUTCFullYear)
		return;

	var jDate = date.getUTCFullYear() + "-";
	jDate += (((date.getUTCMonth() + 1) < 10) ? "0" : "")
			+ (date.getUTCMonth() + 1) + "-";
	jDate += ((date.getUTCDate() < 10) ? "0" : "") + date.getUTCDate() + "T";

	jDate += ((date.getUTCHours() < 10) ? "0" : "") + date.getUTCHours() + ":";
	jDate += ((date.getUTCMinutes() < 10) ? "0" : "") + date.getUTCMinutes()
			+ ":";
	jDate += ((date.getUTCSeconds() < 10) ? "0" : "") + date.getUTCSeconds()
			+ "Z";

	return jDate;
}

15.表情替换

function MsgReplace(msgHTML) {
	var regx = /(\[[\u4e00-\u9fa5]*\w*\]){1}/g;
	// 正则查找“[]”格式
	var rs = msgHTML.match(regx);
	if (rs) {
		for (i = 0; i < rs.length; i++) {
			 for (n = 0; n < em.length; n++) {
				if (em[n].phrase == rs[i]) {
					var t = "<img src='images/emotions/" + em[n].url + "' />";
					msgHTML = msgHTML.replace(rs[i], t);
					break;
				}
			}
		}
	}
	return msgHTML;
}

16.解决IE不识别document.getElementsByName('xxxx')问题

<div name="histMsgInfo" id="histMsgInfo">
		xxxx
</div>

所有同名name的id也需同名

	var New = document.getElementsByName('histMsgInfo');
	for ( var i = 0; i < New.length; i++) {
		var histMsgInfo =New[i].innerHTML;
		histMsgInfo = MsgReplace(histMsgInfo);
		New[i].innerHTML=histMsgInfo;
	}

 17.配置文件以对象形式存储和读取

config.js

var BACKENDS = [ {
	name : "Open Relay",
	description : "HTTP Binding backend that allows connecting to any jabber server",
	httpbase : "/jointframe/JHB/",
	type : "binding",
	default_server : SITENAME
} ];

xxxx.js

function init() {
	HTTPBASE = BACKENDS[0].httpbase;
	BACKEND_TYPE = BACKENDS[0].type;// binding
	JABBERSERVER = BACKENDS[0].default_server;
}

18.复选select

<td valign=top nowrap>选择用户（可复选）:</td><td align=left width="100%"><select name="users_selector" id="users_selector" size=8 multiple style="width:100%;"></select></td>

var users_selector = document.getElementById('users_selector');

	for (var i=0; i < users_selector.options.length; i++) {
		if (users_selector.options[i].selected) {
			
			XXX.set('to',users_selector.options[i].value);
			
		}
	}

19.获取iframe对象

function getPopupWinIframe(winId) {
	var stab = window.top.$('#' + winId, window.top.document.body);
	var siframe;
	if (stab && stab.find('iframe').length > 0) {
		siframe = stab.find('iframe')[0];
	}
	return siframe;
}