- ベストアンサー
Bookmarkletに関する質問
- JavaScriptを用いてページ上の選択した部分のソースを取得して、あるページに送るBookmarkletを作成しようとしています。
- IEでは思い通りの動作をするが、Firefox３では動かない問題が発生しています。
- Firefox3上で選択した部分のソースを取得するBookmarkletを教えていただけると助かります。
- tonton-v2
- お礼率66% (4/6)
- JavaScript
- 回答数6
- ありがとう数5
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
すでに書かれていますが > javascript:(function(){javascript: この書き方がNGです。 > ページ上の選択した部分のソースを取得して とのことですが、 <p>あいうえお<span>かきくけこ</span>さしすせそ</p> というソースがあったとして、ブラウザ表示上で「えおかきく」の部分が選択された状態の時のソースというのは 「えお<span>かきく」 ということでしょうか？ それはたぶん、すべてのブラウザでできないと思います。 var sel=getSelection(); if(sel!=undefiend && sel.rangeCount>0) var range=sel.getRagneAt(0); これで選択範囲が取得できるので、（私はwindow.getSlection()を使っていますが、、、） https://developer.mozilla.org/en/DOM/range このあたりを参考にしてみてください。 単純にrange.toString()でいいかもしれませんし、 range.cloneContents()でdocumentFragmentを生成してinnerHTMLなどを何かしないといけないかもしれません。 documentFragmentにはinnerHTMLがないので、<div>を生成してコピーしてみました。 javascript:(function(){sel=getSelection(); if(sel && sel.rangeCount>0){ range=sel.getRangeAt(0); d=document.createElement('div');d.appendChild(range.cloneContents()); alert(d.innerHTML);}})() 長いので改行しています。 cloneContents()の仕様上、ValidなHTML（XHTML）に書き換えられますので、 選択した範囲のHTMLとは異なりますが、ご参考まで。
その他の回答 (5)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
連続失礼します。 > ANo.1お礼 > <a href="http://www～">リンク</a>が取得できるといったものです） もしhref属性だけを取りたいのであれば、 innerHTMLではなくcloneContentsでdocumentFragmentを生成した後、 DOMツリーからaエレメントを探し、getAttribute('href')などで取得した方がいいかもしれません。
>javascript:(function(){javascript:window.open('http://localhost:3000/webscraps/new?title='+encodeURIComponent(docu...})() これってもしかして<a href="javascript:～ で始めてますか？ そしてfunction(){javascript:～て記述があります これも変！クラス定義みたいになってるし もしやるなら <a href="#" onClick="window.open(～ だけでよいのでは？
お礼
javascriptの記述を全く理解できていないのにやろうとしていたもので＾＾； これから知識を付けていこうかと思います 御回答ありがとうございました！
- notnot
- ベストアンサー率47% (4900/10358)
document.getSelection()で、選択部分の「文字列」は取得できますが、対応する部分のHTMLソースを得る方法は無さそうです。 http://developer.mozilla.org/en/DOM_Client_Object_Cross-Reference/document
お礼
自分も探した結果なさそうだったのですが、どうしても必要で質問させて頂きました。 御回答ありがとうございました！
あっファイル名はtest.htmlにして。 自分自身を呼び出しているので適当に変更してください？
<html> <body> <input type="text" id="a"> <div> マウスで範囲を選択します<br> いやいや色々な表現方法があるものです<br> どう利用するか、どう感じたかは人それぞれ<br> function(){ javascript: ～ ←これはまずい。 123 456 789<br> </div> <script> document.getElementById('a').value = decodeURIComponent(location.search) ; document.body.onmouseup = chk; function chk(){ var key = getSelectText(); if(key=='') return; window.open('test.html?title='+encodeURIComponent(key)); } function getSelectText(){ return (/*@cc_on!@*/false)?((document.selection.type == 'Text')? document.selection.createRange().text:''):window.getSelection().getRangeAt(0); } </script> </body>
お礼
早速の御返事ありがとうございます。 ただ、自分の知識不足で使い方を過ってるだけかもしれませんが、少々望んでいるものと違いまして・・・ まず、FirefoxのURLを入力する欄で実行したいためhtmlではなくjavascript:～を用いて一行で実行したいこと。 テキストを取得するのではなく、HTMLソースを取得したいこと。（ページ上の"リンク"を選択した後にjavascriptを実行すると、<a href="http://www～">リンク</a>が取得できるといったものです） もし自分の勘違いであった場合は申し訳ありません。 本当にありがとうございました。
お礼
教えていただいたコードで思い通りの動作をさせることができました！ しかし、自分の勉強不足も身に染みたのでこれを機にjavascriptの知識をもう少し付けようと思います＾＾； 御回答本当にありがとうございました！