js劃詞翻譯、螢幕取詞,取詞位置獲取(真正解決定位問題)
劃詞、滑鼠選詞、翻譯這些都是很簡單的事一般熟悉js滑鼠事件都能搞定,而比較難的是怎麼確定我們選中的詞在哪個位置執行完翻譯的結果該怎麼定位,這個問題我在開發翻譯外掛時摸了個深坑,全網搜尋不到可用方案,研究有道的劃詞翻譯外掛因它程式碼壓縮也沒發現他的解決方案,最終在火狐開發文件裡找到了normalize才真正解決了定位問題;
滑鼠按下彈起和移動的事件這裡就不貼程式碼了,懂的不需要我貼程式碼,不懂的去菜鳥或w3c那裡講得更詳細
獲取滑鼠選中的詞
var selectText = function(){
var selectText = window.getSelection?window.getSelection():document.selection.createRange().text;
return selectText.toString();
}
獲取最終定位
// _e_point 滑鼠事件
var getPosAtPoint = function(_e_point) {
var range;
var textNode;
var offset;
var fanyi_pos = null;
var scrollTop = that.getScrollTop();
// standard
if (document.caretPositionFromPoint) {
range = document.caretPositionFromPoint(_e_point.pageX, _e_point.pageY - scrollTop);
textNode = range.offsetNode;
offset = range.offset;
}
// WebKit
else if (document.caretRangeFromPoint) {
range = document.caretRangeFromPoint(_e_point.pageX, _e_point.pageY - scrollTop);
textNode = range.startContainer;
offset = range.startOffset;
}
// only split TEXT_NODEs
if (textNode.nodeType == 3) {
var replacement = textNode.splitText(offset);// 擷取滑鼠位置之後的文字
var spanElement = document.createElement('span');// 建立標識
spanElement.id = 'nmh_fanyi_dom';// 設定標識類名
textNode.parentNode.insertBefore(spanElement, replacement);// 插入標識
var fanyi_dom = document.getElementById('nmh_fanyi_dom');
fanyi_pos = fanyi_dom.getBoundingClientRect();
fanyi_pos['height'] = fanyi_dom.offsetHeight;// 獲取插入標識獲得得一行高度
fanyi_dom.parentNode.removeChild(fanyi_dom);// 獲取到位置後移除掉標識
textNode.parentNode.normalize();// 合併文字節點
}
return fanyi_pos;// 返回位置
}
相關文章
- 有道雲詞典--翻譯/螢幕取詞翻譯
- 螢幕取詞核心內幕 (轉)
- 滑鼠螢幕取詞 原理 (轉)
- 金山詞霸取詞pdf檔案問題
- linux系統下可以螢幕取詞的詞典安裝Linux
- 滑鼠螢幕取詞技術的原理和實現 (轉)
- 轉貼:“金山詞霸”螢幕取詞技術揭密(討論稿) (17千字)
- JS獲取螢幕大小JS
- Ubuntu安裝劃詞翻譯軟體Goldendict 單詞翻譯 句子翻譯UbuntuGo
- 螢幕取詞技術實現原理與關鍵原始碼原始碼
- js獲取div相對螢幕的座標位置JS
- 金山詞霸在IE呼叫的PDF檔案取詞問題(摘自sothic)
- API介面獲取搜尋詞統計?API
- 歌詞翻譯
- js獲取網頁螢幕寬高JS網頁
- 網易雲歌詞爬取(java)Java
- Linux獲取某個單詞的個數Linux
- 物件、同義詞和公有同義詞順序選取物件
- 詞典翻譯 英譯漢
- javascript獲取螢幕的尺寸JavaScript
- 小程式獲取當前元素在螢幕中的位置
- Python 爬蟲獲取網易雲音樂歌手歌詞Python爬蟲
- 讓金山詞霸在Acrobat Reader最新版中取詞 (491字)BAT
- win10電腦中安裝有道詞典後會自動取詞如何解決Win10
- JS 獲取瀏覽器和螢幕寬高資訊JS瀏覽器
- php引用discuz地址獲取關鍵詞(www.rijigu.com)PHP
- ES 實現實時從Mysql資料庫中讀取熱詞,停用詞MySql資料庫
- 英語詞典翻譯查詢工具:Eudic歐路詞典 for MacMac
- python讀取txt文字資料進行分詞並生成詞雲圖片Python分詞
- Python分析36套四級真題獲取詞頻最高5000個詞彙,還怕四級不過麼Python
- JS,Jquery獲取各種螢幕的寬度和高度JSjQuery
- 透過JAVA語言如何獲取淘寶/天貓搜尋詞推薦Java
- BeautifulSoup + requests 爬取扇貝 python 單詞書Python
- 獲取各種螢幕高度寬度(工作)
- javascript如何獲取電腦螢幕的尺寸JavaScript
- 使用Python呼叫API介面獲取京東關鍵詞詳情資料PythonAPI
- selenium 知網爬蟲之根據【關鍵詞】獲取文獻資訊爬蟲
- 快手API介面:根據關鍵詞獲取海量商品列表的秘訣API