JS實(shí)現(xiàn)iframe編輯器光標(biāo)位置插入內(nèi)容的方法(兼容IE和Firefox)
本文實(shí)例講述了JS實(shí)現(xiàn)iframe編輯器光標(biāo)位置插入內(nèi)容的方法。分享給大家供大家參考,具體如下:
<html> <iframe id="x" name="x"></iframe> <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>';//插入的內(nèi)容(html),可以是圖片。 if(getBrowser()=='ie'){ var Editor = window.frames["x"];//IE獲取iframe方法,否則圖片位置跑到頁面頂上去了。 Editor.focus(); o=Editor.document.selection.createRange(); o.pasteHTML(html); }else if(getBrowser()=='chrome'){ var Editor = $('x');//firefox要通過這種方式獲取節(jié)點(diǎn)才行 Editor.focus(); //alert(Editor.contentWindow.getSelection().getRangeAt(0)); var rng = Editor.contentWindow.getSelection().getRangeAt(0); var frg = rng.createContextualFragment(html); rng.insertNode(frg); } } //獲取瀏覽器版本 function getBrowser(){ 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); } //根據(jù)元素className屬性獲取元素,如果有多個(gè)元素樣式類名相同,可以用index指定返回第幾個(gè)元素,第一個(gè)為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">
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
- JS在可編輯的div中的光標(biāo)位置插入內(nèi)容的方法
- javascript實(shí)現(xiàn) 在光標(biāo)處插入指定內(nèi)容
- javascript開發(fā)隨筆3 開發(fā)iframe富文本編輯器的一點(diǎn)體會
- JS實(shí)現(xiàn)iframe自適應(yīng)高度的方法(兼容IE與FireFox)
- JS加載iFrame出現(xiàn)空白問題的解決辦法
- 基于JS判斷iframe是否加載成功的方法(多種瀏覽器)
- js檢測iframe是否加載完成的方法
- iframe中子父類窗口調(diào)用JS的方法及注意事項(xiàng)
- js實(shí)現(xiàn)刷新iframe的方法匯總
相關(guān)文章
javascript設(shè)置頁面背景色及背景圖片的方法
這篇文章主要介紹了javascript設(shè)置頁面背景色及背景圖片的方法,涉及JavaScript動態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下2015-12-12js利用cookie實(shí)現(xiàn)記住用戶頁面操作
這篇文章主要給大家介紹了關(guān)于js利用cookie實(shí)現(xiàn)記住用戶頁面操作的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03console.log()與console.dir()的區(qū)別及說明
這篇文章主要介紹了console.log()與console.dir()的區(qū)別及說明,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01JavaScript控制瀏覽器全屏及各種瀏覽器全屏模式的方法、屬性和事件
這篇文章主要介紹了JavaScript控制瀏覽器全屏及各種瀏覽器全屏模式的方法、屬性和事件的相關(guān)資料,需要的朋友可以參考下2015-12-12layui實(shí)現(xiàn)table加載的示例代碼
今天小編就為大家分享一篇layui實(shí)現(xiàn)table加載的示例代碼,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08用javascript連接access數(shù)據(jù)庫的方法
用javascript連接access數(shù)據(jù)庫的方法...2006-11-11