首页
人工智能
编程教程
编程导航
编程百科
编程问答
编程博文
编程实例
硬件设备
网络运营
软件教程
移动数码
办公软件
操作系统
网络运维
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
JavaScript
2019-01-05
本文实例讲述了JS实现iframe编辑器光标位置插入
内容
的
方法
。
分享
给大家供大家参考，具体如下：
rush:js;">
<input type="button" onclick="t()" value="test"> <input type="button" onclick="frames['x'].location.href='about:blank';" value="clear"> <script> //setTimeout('window.frames["x"].document.designMode="On"',200); function t(){ window.frames["x"].document.designMode="On"; var html = '<b style="color:red">'+$('xx').value+'</b>';//插入的<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>(html)，可以是<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>。 if(get<a href="https://www.jb51.cc/tag/bro/" target="_blank" class="keywords">bro</a>wser()=='ie'){ var Editor = window.frames["x"];//IE<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>iframe<a href="https://www.jb51.cc/tag/fangfa/" target="_blank" class="keywords">方法</a>，否则<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>位置跑到<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>顶上去了。 Editor.focus(); o=Editor.document.selection.crea<a href="https://www.jb51.cc/tag/tera/" target="_blank" class="keywords">tera</a>nge(); o.pasteHTML(html); }else if(get<a href="https://www.jb51.cc/tag/bro/" target="_blank" class="keywords">bro</a>wser()=='chrome'){ var Editor = $('x');//firefox要通过这种方式<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>节点才行 Editor.focus(); //alert(Editor.conten<a href="https://www.jb51.cc/tag/twind/" target="_blank" class="keywords">twind</a>ow.getSelection().getRangeAt(0)); var rng = Editor.conten<a href="https://www.jb51.cc/tag/twind/" target="_blank" class="keywords">twind</a>ow.getSelection().getRangeAt(0); var frg = rng.createContextualFragment(html); rng.insertNode(frg); } } //<a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>浏览器版本 function get<a href="https://www.jb51.cc/tag/bro/" target="_blank" class="keywords">bro</a>wser(){ var agentValue = window.navigator.userAgent.toLowerCase(); if(agentValue.indexOf('msie')>0){ return "ie"; }else if(agentValue.indexOf('firefox')>0){ return "ff"; }else if(agentValue.indexOf('chrome')>0){ return "chrome"; } } function $(id){ return document.getElementById(id); } //根据元素className<a href="https://www.jb51.cc/tag/shuxing/" target="_blank" class="keywords">属性</a><a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>元素，如果有多个元素样式类名相同，可以用index指定返回第几个元素，第<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a>为1 function getNodeByClassName(vclassname,index){ //var allnodes = document.all; var allnodes = document.getElementsByTagName("*"); var x = 0; for(var i=0;i<allnodes.length;i++){ if(allnodes[i].className==vclassname){ if(index!="undefined"){ x++; if(x<index){ continue; } } return allnodes[i]; } } } </script> 输入： <input id="xx"></pre> </div> <p>更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《<a target="_blank" href="//www.jb51.cc/Special/313.htm">JavaScript中json操作技巧总结</a>》、《<a target="_blank" href="//www.jb51.cc/Special/502.htm">JavaScript切换特效与技巧总结</a>》、《<a target="_blank" href="//www.jb51.cc/Special/472.htm">JavaScript查找算法技巧总结</a>》、《<a target="_blank" href="//www.jb51.cc/Special/462.htm">JavaScript动画特效与技巧汇总</a>》、《<a target="_blank" href="//www.jb51.cc/Special/439.htm">JavaScript错误与调试技巧总结</a>》、《<a target="_blank" href="//www.jb51.cc/Special/297.htm">JavaScript数据结构与算法技巧总结</a>》、《<a target="_blank" href="//www.jb51.cc/Special/281.htm">JavaScript遍历算法与技巧总结</a>》及《<a target="_blank" href="//www.jb51.cc/Special/119.htm">JavaScript数学运算<a href="https://www.jb51.cc/tag/yongfa/" target="_blank" class="keywords">用法</a>总结</a>》</p> <p>希望本文所述对大家JavaScript程序设计有所帮助。</p><div class="topcard-tags"><a href="https://m.jb51.cc/tag/iframe/" class="tag_link" target="_blank">iframe</a><a href="https://m.jb51.cc/tag/iframep/" class="tag_link" target="_blank">iframe</a><a href="https://m.jb51.cc/tag/guangbiaoweizhi/" class="tag_link" target="_blank">光标位置</a><a href="https://m.jb51.cc/tag/charuneirong/" class="tag_link" target="_blank">插入内容</a><a href="https://m.jb51.cc/tag/bianjiqi/" class="tag_link" target="_blank">编辑器</a><a href="https://m.jb51.cc/tag/pbianjiqi/" class="tag_link" target="_blank">编辑器</a><a href="https://m.jb51.cc/tag/bianjiqip/" class="tag_link" target="_blank">编辑器</a></div> </div> </div> </div> <!-- row end--> <div class="clearfix"></div> <!-- row --> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <div class="title"><h1>相关文章</h1></div><div class="list_con"> <img src="https://m.jb51.cc/res/2024/09-25/18/879e7ec08a36083a57dfc8b44214469d.gif" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/js/4742335.html" title="自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗">自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗</a> </div> <div class="summary">前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为l...</div> </div><div class="list_con"> <img src="https://m.jb51.cc/res/2024/09-25/18/84bd76d88488cafdfb2789b5a991fecf.png" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/js/4742334.html" title="nice-validator表单验证插件的简单使用">nice-validator表单验证插件的简单使用</a> </div> <div class="summary">前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...</div> </div><div class="list_con"> <img src="https://m.jb51.cc/res/2024/09-25/18/cf659cff914621d918c6072273c30973.gif" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/js/4742333.html" title="基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现">基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现</a> </div> <div class="summary">前言 图片上传是web项目常见的需求，我基于之前的博客的代码...</div> </div><div class="list_con"> <img src="https://m.jb51.cc/res/2024/09-25/18/02f80db4fdf55f3a24674e2854e018f2.png" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/js/4742332.html" title="踹掉后端，前端导出Excel！">踹掉后端，前端导出Excel！</a> </div> <div class="summary">前言 导出Excel文件这个功能，通常都是在后端实现返回前端一...</div> </div><div class="list_con"> <img src="https://m.jb51.cc/res/2024/09-25/18/db8dce1453ed09a8230451f2a9fcdc68.png" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/js/4742331.html" title="Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量">Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量</a> </div> <div class="summary">前言 众所周知，js是单线程的，从上往下，从左往右依次执行，...</div> </div><div class="list_con"> <img src="https://m.jb51.cc/res/2024/09-25/18/1cd1c972ce822d1a99b7d1b2c8f9cfcd.png" width="100" height="64" style="float:right;margin-left:20px;" /> <div class="title"> <a href="https://m.jb51.cc/js/4742330.html" title="select标签 禁止选择但又能通过序列化form表单传值到后台">select标签 禁止选择但又能通过序列化form表单传值到后台</a> </div> <div class="summary">前言 项目开发中，我们可能会碰到这样的需求：select标签，禁...</div> </div></div> </div> <!-- row end--> </div> </div> <footer id="footer"> <div class="container"> <div class="copyright"> Copyright © 2018 编程之家. 当前版本 V7.0.16<br> <span class="ml5">编程之家 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-8</a> </div> </div> </footer> <script> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(bp, s); })(); </script> <script src="https://m.jb51.cc/js/count.js"></script> </body> </html>
