前提・実現したいこと
javascriptを使って(正確にはbookmarklet)、選択された文字列を取得して処理を実行したいと考えているのですが、iframeが複数あるページではうまく働かない事がわかったのですが、その解決方法がわからず、ご教示いただければと思います。
動作させる環境に制限があるため、chromeで動作するjavascriptのみで実現したいと考えております。
・現在focusされて選択されている文字列だけを取得できるようにしたいです。
(複数個所が選択されている場合に現在選択している箇所のみ)
・ページ内のどの箇所でも(本文やtextareaなど)取得したい
・iframeを含めすべて同一ドメイン
・こちらのページを参考もしてみましたが、注意書きにあるようにテキストが複数選択された場合の挙動などでうまく解決できませんでした(http://www.akatsukinishisu.net/itazuragaki/js/get_selected_text.html)
よろしくお願いいたします。
発生している問題・エラーメッセージ
・上記サイトを参考にテスト用に書いてみましたが、ページ内で選択した文字列は取得できるのですが、 ページ内で複数選択されてしまっている場合には、すべての選択文字が取得されてしまう。 ・textareaにある文字を選択すると複数回ポップアップしてしまう。
該当のソースコード
※当初より修正をしました
javascript
1javascript:(function(){ 2 var selected=0; 3 traceFrames(window); 4 if(!selected){ 5 var q=prompt('please input text.'); 6 if(q){ 7 openWindow(q); 8 } 9 } 10 11 function traceFrames(w){ 12 getSelectedText(w); 13 var flen=w.frames.length; 14 for(var i=0;i<flen;i++){ 15 traceFrames(w[i]); 16 } 17 } 18 19 function getSelectedText(w){ 20 var t=0; 21 try{ 22 t=w.getSelection().toString(); 23 }catch(e){ 24 return; 25 } 26 if(t){ 27 openWindow(t); 28 }else{ 29 var form_focused_elm = document.activeElement; 30 if( !!form_focused_elm.value ){ 31 t=form_focused_elm.value.substring(form_focused_elm.selectionStart, form_focused_elm.selectionEnd); 32 openWindow(t); 33 } 34 } 35 } 36 37 function openWindow(q){ 38 selected++; 39 alert(q); 40 } 41})();
test用ページ
以下のテストページですべての個所で取得できればよいと考えております。
html
1test.html 2 3<html> 4<body> 5<p>12345</p> 6<iframe src="./test1.html"></iframe> 7<iframe src="./test2.html"></iframe> 8<iframe src="./test3.html"></iframe> 9<form action="" method="post"> 10<textarea name="test" rows="4" cols="40"></textarea><br> 11</form> 12</body> 13</html> 14 15------------------------------ 16test1.html 17------------------------------ 18<html> 19<body> 20<a> 123456789 </a> 21</body> 22</html> 23 24------------------------------ 25test2.html 26------------------------------ 27<html> 28<body> 29<a> 01234567890 </a> 30</body> 31</html> 32 33------------------------------ 34test3.html 35------------------------------ 36<html> 37<body> 38<form action="" method="post"> 39<textarea name="test3" rows="4" cols="40"></textarea><br> 40</form> 41</body> 42</html>
試したこと
### 補足情報(FW/ツールのバージョンなど)
あなたの回答
tips
プレビュー