iframe编辑器光标位置插入内容方法,兼容IE和Firefox

6 篇文章 0 订阅
  1. <html>
  2. <iframe id="x" name="x"></iframe>
  3. <input type="button" οnclick="t()" value="test">
  4. <input type="button" οnclick="frames['x'].location.href='about:blank';" value="clear">
  5. <script>
  6. //setTimeout('window.frames["x"].document.designMode="On"',200);
  7. function t(){
  8. window.frames["x"].document.designMode="On";
  9. var html = '<b style="color:red">'+$('xx').value+'</b>';//插入的内容(html),可以是图片。
  10. if(getBrowser()=='ie'){
  11. var Editor = window.frames["x"];//IE获取iframe方法,否则图片位置跑到页面顶上去了。
  12. Editor.focus();
  13. o=Editor.document.selection.createRange();
  14. o.pasteHTML(html);
  15. }else if(getBrowser()=='chrome'){
  16. var Editor = $('x');//firefox要通过这种方式获取节点才行
  17. Editor.focus();
  18. //alert(Editor.contentWindow.getSelection().getRangeAt(0));
  19. var rng = Editor.contentWindow.getSelection().getRangeAt(0);
  20. var frg = rng.createContextualFragment(html);
  21. rng.insertNode(frg);
  22. }
  23. }
  24. //获取浏览器版本
  25. function getBrowser(){
  26. var agentValue = window.navigator.userAgent.toLowerCase();
  27. if(agentValue.indexOf('msie')>0){
  28. return "ie";
  29. }else if(agentValue.indexOf('firefox')>0){
  30. return "ff";
  31. }else if(agentValue.indexOf('chrome')>0){
  32. return "chrome";
  33. }
  34. }
  35. function $(id){
  36. return document.getElementById(id);
  37. }
  38. //根据元素className属性获取元素,如果有多个元素样式类名相同,可以用index指定返回第几个元素,第一个为1
  39. function getNodeByClassName(vclassname,index){
  40. //var allnodes = document.all;
  41. var allnodes = document.getElementsByTagName("*");
  42. var x = 0;
  43. for(var i=0;i<allnodes.length;i++){
  44. if(allnodes[i].className==vclassname){
  45. if(index!="undefined"){
  46. x++;
  47. if(x<index){
  48. continue;
  49. }
  50. }
  51. return allnodes[i];
  52. }
  53. }
  54. }
  55. </script>
  56. 输入: <input id="xx">  
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值