質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

341閲覧

javascriptで複数のiframeを含むページから選択文字を取得

tobisumi

総合スコア6

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

3クリップ

投稿2018/05/01 03:19

編集2022/01/12 10:55

前提・実現したいこと

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/ツールのバージョンなど)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/05/01 04:18

htmlも可能な限りご提示ください。
tobisumi

2018/05/01 04:54

ご指摘ありがとうございます。外に出せないページなので詳しくは書けないので申し訳ないのですが、汎用的にはむつかしいでしょうか。なお、iframeも含めすべて同一ドメイン内のページになります。不足部分は可能な限り回答できるよう努めますのでよろしくお願いいたします。
sk_3122

2018/05/01 07:45

そのままのソースではなくても良いので、現象が再現できるサンプルソースのようなものを載せた方が回答が付きやすいと思います。回答する側が「iframeが複数あるhtmlソース」をカリカリ書くのは面倒なので・・・ サンプルHTMLが用意してあると回答意欲が向上します
m.ts10806

2018/05/01 08:18

もし公開出来ない情報が含まれている場合はtestやhogeとかで適当にマスクしてもらってもかまいません。おおよそ構造がわかって実際のhtmlと同じ状況が再現できるものであれば良いです。
tobisumi

2018/05/01 09:10

みなさまご確認いただきましてありがとうございます。加工に時間がかかりそうなので、また更新いたします。よろしくお願いいたします。
tobisumi

2018/05/22 06:45

どなたか解決策をご教示いただけますでしょうか。よろしくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問