1 2 下一页 (Page 1 of 2)
innerHTML插入CSS样式表

在修改这个日志编辑器时碰到的问题,IE中innerHTML插入html代码如果混杂有css样式表,当css样式插入在元素最前面时,IE会忽略这个样式。

演示(下面代码在IE中字体将是黑色,而firefox中会正确的显示为红色):

  1. <HTML>  
  2.   
  3. <DIV id=test></DIV>  
  4. <SCRIPT>  
  5. document.getElementById("test").innerHTML += "<style>b{color:red}</style><b>hello!World!!!</b>";   
  6. </SCRIPT>  
  7.   
  8. <HTML>  

其它参考:PJHome的使用innerHTML插入样式。不过感觉这篇文章中说的不是很正确。

文中提到“IE对这里的顺序要严格要求。必须先插入html内容然后再插入<style>样式才生效。这样test这个div 里就会出现一个红色的 hello!World! 但是如果把<style>放到<b>前头,就被IE无视了。”

感觉上说的是CSS样式表需要放在使用这个样式表的元素前面。而实际上,插入内容时,只要有任意一个其它html元素就行了,比如br,pre,div等。:)

 

IE7 & Firefox3

IE6的使命终于快结束了,MS再过几天(2月12日)起将强制推送IE7浏览器。如果不想更新到IE7,可以使用MS官方提供的IE7BlockerToolkit

安装后,打开CMD进入安装目录,敲入IE70Blocker.cmd /B即可屏蔽自动更新IE7,换成/U参数则允许自动更新IE7。

对于IE6的结束,我更希望Firefox3的到来。Firefox3中终于支持模态对话框了,在2中虽然支持模态对话框,但需要特殊设置一些权限。

mozilla developer center上,已经可以看到FF3中支持window.showModalDialog(),window.dialogArguments。

最要命的是在FF2中模拟模态对话框会产生某些RP问题,比如FCKEditor(2.5.1)工具栏的帮助按钮在FF中模拟了模态对话框,但在我机器上运行时,多点几次父窗口,再关闭子窗口,CPU占用率就90%以上。

自己写个window.open,以dialog方式弹出再关闭,CPU占用率也有90%以上。简单页面没有测试,但就算弹出的页面复杂一点,CPU也不要一直飙到90%以上。

Firefox3快来吧!

IE6不缓存背景图片的解决方法

前些天参照extjs做了一个类似的下拉列表组件,做完后发现在IE6下切换背景图片时有明显的延迟,而extjs没有类似情况。

原因是因为IE6中默认没有缓存背景图片,虽然切换时是使用同一样图片,不同位置。但是每次都会发起一次HTTP请求(虽然会返回HTTP状态304)

可以使用如下方法解决:

  1. // 先判断一下是否是ie6   
  2. if (isIE6) {   
  3.     try {   
  4.         document.execCommand("BackgroundImageCache"falsetrue);   
  5.     } catch (e) {   
  6.     }   
  7. }  
IE中自动安装根数字证书
上一篇日志中介绍了tomcat+openssl实现双向认证,但第6步需要用户手工将个人证书及根证书手工导入到IE中去。这里介绍一种自动导入根证书到IE中去的方法。
  • 只自动导入根证书,在原有那篇文章的基础上不需要做什么改动,直接读出根证书内容即可实现。
  • 即自动导入根证书,又要自动导入个人证书,这种情况下,创建证书请求的工作要交给IE控件完成。
微软的ICEnroll接口中提供了createPKCS10acceptPKCS7方法来创建证书,安装证书功能。在ICEnroll3接口中提供了InstallPKCS7,可以使用它来安装根证书。

只自动导入根证书。

  1. <%   
  2.     StringTokenizer st = null;   
  3.     String line = null;   
  4.   
  5.     // ------------------------------------------------------------- 返回CA证书内容 >>>   
  6.     String server_cert = "开始用openssl生成的根证书内容";   
  7.     if (StringUtils.isBlank(server_cert)) {   
  8.         throw new BusinessException("读取CA证书失败");   
  9.     }   
  10.   
  11.     // 这里的这些操作,是为了生成vbscript中证书内容的变量定义   
  12.     String pkcs7ca = "sPKCS7ca=\"\" & vbcrlf\r\n";   
  13.     st = new StringTokenizer(server_cert, "\r\n");   
  14.   
  15.     while (st.hasMoreTokens()) {   
  16.         line = st.nextToken();   
  17.         if (line.equals("\r\n"))   
  18.             continue;   
  19.         pkcs7ca += "sPKCS7ca=sPKCS7ca & \"" + line + "\" & vbcrlf\r\n";   
  20.     }   
  21. %>   
  22.   
  23. <OBJECT id=XEnroll codeBase=xenroll.dll classid=clsid:127698e4-e730-4e5c-a2b1-21490a70c8a1></OBJECT>   
  24.   
  25. <SCRIPT type=text/vbscript>   
  26.     ON ERROR resume next   
  27.     <%=pkcs7ca%>   
  28.     XEnroll.InstallPKCS7 sPKCS7ca   
  29.     If err.number = 438 then   
  30.         msgbox err.description & err.number   
  31.     Elseif err.number <> 0 then   
  32.         msgbox err.description & err.number   
  33.     Else   
  34.         msgbox "根证书安装成功"  
  35.     End If   
  36. </SCRIPT>  
IE和Firefox下textarea操作方法及取消事件冒泡

之前的留言回复使用tiny_mec做所见即所得编辑器,速度感觉太慢了,于是自己想写个简单的UBB编辑器玩玩,碰到一些问题记这里:

IE和Firefox下取消事件冒泡

  1. function showEmot() {   
  2.     var evt =  || event;   
  3.     if(evt.preventDefault) {   
  4.         // Firefox   
  5.         evt.preventDefault();   
  6.         evt.stopPropagation();   
  7.     } else {   
  8.         // IE   
  9.         evt.cancelBubble=true;   
  10.         evt.returnValue = false;   
  11.     }   
  12. }  

textarea下将一段内容替换鼠标所选文字或插入到当前光标位置

  1. function append() {   
  2.     // sEditorId textarea的ID   
  3.     var eObj = document.getElementById(sEditorId);   
  4.     // ie   
  5.     if (eObj.createTextRange) {   
  6.         eObj.focus();   
  7.         document.selection.createRange().duplicate().text = ;   
  8.     } else {   
  9.         // firefox   
  10.         var iStart = eObj.selectionStart;   
  11.         var iEnd = eObj.selectionEnd;   
  12.         eObj.value = eObj.value.substr(0, iStart) +  + eObj.value.substr(iEnd, eObj.value.length);   
  13.         eObj.focus();   
  14.     }   
  15. }  
IE,firefox下禁止元素文本被选取的方法

IE下有onselectstart这个方法,通过设置这个方法可以禁止元素文本被选取。而firefox下没有这个方法,但可以通过css或一种变通的办法解决:

  1. if (typeof(element.onselectstart) != "undefined") {       
  2.     // IE下禁止元素被选取       
  3.     element.onselectstart = new Function("return false");       
  4. else {       
  5.     // firefox下禁止元素被选取的变通办法       
  6.     element.onmousedown = new Function("return false");       
  7.     element.onmouseup = new Function("return true");       
  8. }  
或使用CSS:
  1. div {       
  2.     -moz-user-select: none;       
  3. }   
1 2 下一页 (Page 1 of 2)