Bookmarkletに関する質問

前へ 次へ
このQ&Aのポイント
  • JavaScriptを用いてページ上の選択した部分のソースを取得して、あるページに送るBookmarkletを作成しようとしています。
  • IEでは思い通りの動作をするが、Firefox３では動かない問題が発生しています。
  • Firefox3上で選択した部分のソースを取得するBookmarkletを教えていただけると助かります。
回答を見る
  • ベストアンサー

Bookmarkletに関して

質問失礼します。 現在JavaScriptを用いてページ上の選択した部分のソースを取得して、あるページに送るというBookmarkletを作成しようとしているのですが、Firefox３上で動作するものが出来ません。 例えば javascript:(function(){javascript:window.open('http://localhost:3000/webscraps/new?title='+encodeURIComponent(document.title)+'&body='+encodeURIComponent(document.selection.createRange().htmlText));})() これならIE上で思い通りの動作をするのですが、Firefoxでは動きません。 javascript:(function(){javascript:window.open('http://localhost:3000/webscraps/new?title='+encodeURIComponent(document.title)+'&body='+encodeURIComponent(document.body.innerHTML));})() これではFirefox3上で動くのですが、選択範囲ではなくページ全体のソースが送られます。 どなたか分かる方がいらっしゃいましたら、「Firefox3上で選択部分のソースを取得するBookmarklet」を教えて頂けませんか？

質問者が選んだベストアンサー

  • ベストアンサー
回答No.5

すでに書かれていますが > 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とは異なりますが、ご参考まで。

tonton-v2
質問者

お礼

教えていただいたコードで思い通りの動作をさせることができました！ しかし、自分の勉強不足も身に染みたのでこれを機にjavascriptの知識をもう少し付けようと思います＾＾； 御回答本当にありがとうございました！

その他の回答 (5)

回答No.6

連続失礼します。 > ANo.1お礼 > <a href="​http://www​～">リンク</a>が取得できるといったものです） もしhref属性だけを取りたいのであれば、 innerHTMLではなくcloneContentsでdocumentFragmentを生成した後、 DOMツリーからaエレメントを探し、getAttribute('href')などで取得した方がいいかもしれません。

noname#84373
noname#84373
回答No.4

>javascript:(function(){javascript:window.open('​http://localhost:3000/webscraps/new?title='+encodeURIComponent(docu...​})() これってもしかして<a href="javascript:～ で始めてますか？ そしてfunction(){javascript:～て記述があります これも変！クラス定義みたいになってるし もしやるなら <a href="#" onClick="window.open(～ だけでよいのでは？

tonton-v2
質問者

お礼

javascriptの記述を全く理解できていないのにやろうとしていたもので＾＾； これから知識を付けていこうかと思います 御回答ありがとうございました！

  • notnot
  • ベストアンサー率47% (4848/10262)
回答No.3

document.getSelection()で、選択部分の「文字列」は取得できますが、対応する部分のHTMLソースを得る方法は無さそうです。 http://developer.mozilla.org/en/DOM_Client_Object_Cross-Reference/document

tonton-v2
質問者

お礼

自分も探した結果なさそうだったのですが、どうしても必要で質問させて頂きました。 御回答ありがとうございました！

noname#84373
noname#84373
回答No.2

あっファイル名はtest.htmlにして。 自分自身を呼び出しているので適当に変更してください？

noname#84373
noname#84373
回答No.1

<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>

tonton-v2
質問者

お礼

早速の御返事ありがとうございます。 ただ、自分の知識不足で使い方を過ってるだけかもしれませんが、少々望んでいるものと違いまして・・・ まず、FirefoxのURLを入力する欄で実行したいためhtmlではなくjavascript:～を用いて一行で実行したいこと。 テキストを取得するのではなく、HTMLソースを取得したいこと。（ページ上の"リンク"を選択した後にjavascriptを実行すると、<a href="http://www～">リンク</a>が取得できるといったものです） もし自分の勘違いであった場合は申し訳ありません。 本当にありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • javascriptでのエラーについて

    Windows7+IE8にて以下の処理を行いたいのですが、 ================================================== (1) 親ウィンドウ(oya_window.html)から、【window.open】にて 　　子ウィンドウ(ko_window.html)を開く (2) 子ウィンドウ(ko_window.html)の【window.opener】にて 　　親ウィンドウ(oya_window.html)に定義されている 　　【window.open】を実行する関数[openWindow]を呼び出し、 　　Yahooページを開く ================================================== (2)の部分で以下のエラーとなり、Yahooページを開く事ができません。 --------------------------------------------------------- このWebページのエラーにより、正しく機能しない場合があります。 --------------------------------------------------------- タグが無効です。 oya_window.html　　　ライン:10 コード：0　　　　　　文字：5 --------------------------------------------------------- 同マシン(Windows7)のfirefoxでは問題なく処理が行えるため、IEの 何らかの設定に起因していると思うのですが、IEの何の設定に起因して いるのかわからず、困っています。 何か情報をお持ちの方いらっしゃいましたら、よろしくお願いします。 【その他情報】 ○IEをアドオンなしで起動しても同エラーが発生することから、IEの 　アドオンによる影響ではないと思われます。 ○以下の処理は問題なく実行できます。 　▼パターンＡ 　================================================== 　(1) 親ウィンドウ(oya_window2.html)から、【window.open】にて 　　　子ウィンドウ(ko_window2.html)を開く 　(2) 子ウィンドウ(ko_window2.html)にて(元々親ウィンドウ 　　　(oya_window.html)に定義していた)【window.open】を実行する 　　　関数[openWindow]を呼び出し、Yahooページを開く 　================================================== 　▼パターンＢ 　================================================== 　(1) 親ウィンドウ(oya_window3.html)から、【window.open】にて 　　　子ウィンドウ(ko_window3.html)を開く 　(2) 子ウィンドウ(ko_window3.html)の【window.opener】にて 　　　親ウィンドウ(oya_window.html)に定義されている 　　　【document.bgColor】を実行する関数[changeColor]を呼び出し 　　　親ウィンドウの背景色を灰色に変更する 　================================================== 【ソース】 ▼本来のパターン ==親ウィンドウ(oya_window.html)=================== <HTML> <HEAD> <TITLE>親ウィンドウ </TITLE> <script language="Javascript"> function koopen(){ window.open("ko_window.html","ko_window","status=yes,width=800,height=100"); } function openWindow(){ window.open("http://yahoo.co.jp","",""); } </script> </HEAD> <BODY> <a href="JavaScript:koopen();">子ウインドウを開く</a> </BODY> </HTML> ================================================== ==子ウィンドウ(ko_window.html)=================== <HTML> <HEAD> <TITLE>子ウィンドウ </TITLE> <script language="Javascript"> function helpop(){ window.opener.openWindow(); } </script> </HEAD> <BODY> <a href = "JavaScript:helpop();">Yahooページを開く</a> </BODY> </HTML> ================================================== ▼パターンＡ ==親ウィンドウ(oya_window2.html)=================== <HTML> <HEAD> <TITLE>親ウィンドウ </TITLE> <script language="Javascript"> function koopen(){ window.open("ko_window2.html","ko_window","status=yes,width=800,height=100"); } </script> </HEAD> <BODY> <a href="JavaScript:koopen();">子ウインドウを開く</a> </BODY> </HTML> ================================================== ==子ウィンドウ(ko_window2.html)=================== <HTML> <HEAD> <TITLE>子ウィンドウ </TITLE> <script language="Javascript"> function helpop(){ window.opener.window.open("http://yahoo.co.jp","",""); } </script> </HEAD> <BODY> <a href = "JavaScript:helpop();">Yahooページを開く</a> </BODY> </HTML> ================================================== ▼パターンＢ ==親ウィンドウ(oya_window3.html)=================== <HTML> <HEAD> <TITLE>親ウィンドウ </TITLE> <script language="Javascript"> function koopen(){ window.open("ko_window3.html","ko_window","status=yes,width=800,height=100"); } function changeColor(){ document.bgColor="CCCCCC"; } </script> </HEAD> <BODY> <a href="JavaScript:koopen();">子ウインドウを開く</a> </BODY> </HTML> ================================================== ==子ウィンドウ(ko_window3.html)=================== <HTML> <HEAD> <TITLE>子ウィンドウ </TITLE> <script language="Javascript"> function helpop(){ window.opener.changeColor(); } </script> </HEAD> <BODY> <a href = "JavaScript:helpop();">親ウィンドウの色を変える</a> </BODY> </HTML> ==================================================

  • htmlファイルのインクルード

    htmlファイルのインクルード あるページを複数の別のhtmlファイルを読み込んで構成しようと思っています。 以下がソースなのですがFirefoxでは samplesample テストテスト と表示されるのですが、Internet Explorerでは テストテスト のみが表示されsample.htmlが読み込まれません。 何がいけないのでしょうか。 よろしくお願いします。 [index.html] <html> <head> <title>テストページ</title> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript"> function my_include(id, file) { document.open(); document.write('<div id="' + id + '"></div>'); document.close(); var options = {}; options.method = "get"; options.asynchronous = true; new Ajax.Updater(id, file, options); } </script> </head> <body> <div id="headers"></div> <script type="text/javascript">my_include("headers","sample.html");</script> テストテスト </body> </html> [sample.html] <head> <title>sampleページ</title> </head> <body> samplesample </body> </html> [バージョン情報] Firefox 3.6.3 Internet Explorer 8 prototype.js 1.6.1

    • ベストアンサー
    • HTML
  • 現在javascriptでチェックボックスで選択した項目のvalueを

    現在javascriptでチェックボックスで選択した項目のvalueを次ページに渡すものを作成しています。 １つだけ選択すると正常に値が動くのですが、複数選択すると後に選択したほうの値だけが入ってしまいます。 複数選択した場合に選択した全てのvalueが入るようにするにはどうしたらいいでしょうか？ 【1ページ目ソース】 <html> <head> <title>1page</title> </head> <body> <form name="F1" onsubmit="window.open('2page.html','_blank','');return false;"> A<input type="text" id="tanka1"> B<input type="checkbox" name="che1" id="check1" value="1">1 <input type="checkbox" name="che1" id="check1" value="2">2 <input type="checkbox" name="che1" id="check1" value="3">3 <input type="submit" value="送信" onclick=check();></form> </body> </html> 【2ページ目ソース】 <html> <head> <title>2page</title> <script> window.onload=function (){ document.F2.tanka1.value=window.opener.document.F1.tanka1.value; if (window.opener.document.F1.che1[0].checked)document.F2.check1.value=1; if (window.opener.document.F1.che1[1].checked)document.F2.check1.value=2; if (window.opener.document.F1.che1[2].checked)document.F2.check1.value=3; } </script> </head> <body> <form name="F2"> A<input type="text" id="tanka1"> B<input type="text" id="check1"> <br><br> </body> </html>

  • Window.open でフレームに表示

    JAVAを使い、指定のフレームに新しい画面を表示したいのですが、要領が良く判りません。 以下のように _blank で新しいウィンドウを開くのはできます。どなたか　ご指導　お願いします。 <TITLE></TITLE> <SCRIPT language="JavaScript"> function new_window(url) { window.open(url, '_blank'); } </SCRIPT> </HEAD> <BODY onload="new_window('comp-page1.htm');">

    • ベストアンサー
    • Java
  • JavaScriptで子ウィンドウからメールを送信

    javascriptで子ウィンドウからメールを送信したいです。 JSは全くの素人なので、手探りでやっています。 サーバーはCGIが使えない環境なので、何かよい方法はないでしょうか？ <html> <title>sub window sample1</title> <body> <h1>Sub Window Sample1</h1> <script language="JavaScript" type="text/javascript"> function formSubmit(){ window.open("","window1","width=400","height=200"); document.getElementById("form1").target = "window1" ); } </script> <form id="form1" action="" > <input type="button" name="submit" value="mail window!" onClick="formSubmit()"> </form> </body> </html> このようなソースを途中まで書いてみましたが、子ウインドウすら開いて くれません。 ぜひご教示をよろしくお願いいたします。

  • dummyページを一瞬で開き、閉じるjavascriot

    例えば、あるページを開いたときにサブウィンドウで yahooを開き、そのあとすぐにそのサブウィンドウ（yahoo）を 閉じる処理を行いたいのですが、うまくいきません。 ちなみに、以下のように記述しました。 <html> <head> <title></title> <script language="JavaScript"> <!-- function Dummy_Window() { window.open("http://www.yahoo.co.jp","window1","width=400,height=80"); window.close("http://www.yahoo.co.jp","window1"); } // --> </SCRIPT> </head> <body onload="Dummy_Window();"> </body> </html>

  • SSIをJavascriptの変数に割り当てる方法

    はじめまして！JavaScriptで質問があります。 JavaScriptで質問があります。 以下のようなwindowを生成し、HTMLを出力するJavaScriptコードをJSファイルとして登録し、 <script type="text/javascript" src="..."></script> で参照しています。 JSファイル内の[[ここに改行コード]]はSSIファイルを読み込んでいます。 SSIファイルの内容は改行コード、"（ダブルクォーテーション）を含んでいます。 この場合win.document.write(に続く'（シングルクォーテーション）で囲った文字列が改行してしまうので、 JavaScriptエラーとなってしまいます。 このエラーを解決できる手段はないでしょうか。 ↓JSファイル ---------------------------------- function windowOpen() { var win; win = window.open(); win.document.write('<html><head><title>title</title></head><body>[[ここに改行コード]]</body></html>'); } ---------------------------------- function内で以下のようにコメントを出力し、windowOpenの関数のコードを読み取ることができれば、 windowOpenCommentStart～windowOpenCommentEndまでの文字を切り取り、変数に代入することができる のですが、関数のコードを取得することなんてできませんよね。。 ---------------------------------- function windowOpen() { /* windowOpenCommentStart [[ここに改行コード]] windowOpenCommentEnd */ var win; win = window.open(); win.document.write('<html><head><title>title</title></head><body>' + [[ここに改行コードを変数化]] + '</body></html>'); } ---------------------------------- JSファイル内に[[ここに改行コード]]を出力することが条件ですが、 どんな方法でもよいので実現する方法はないでしょうか。 環境：WindowsXP ブラウザ：IE6,FireFox2

  • JavaScript暦1ヶ月未満のペーペーです。

    JavaScript暦1ヶ月未満のペーペーです。 JavaScriptでテキストとラジオボタンの値を同時に別ページへ渡すものを作っているのですが、過去の質問とは微妙に違っていて困っています。 現在ページを２つ作っていて、1ページ目で入力した値(選択したラジオボタンの値）を2ページ目に渡したいのですが、うまく渡せないでいます。 【1ページ目ソース】 <html> <head> <title>1page</title> </head> <body> <form name="F1" onsubmit="window.open('2page.html','_blank','');return false;"> テキスト<input type="text" id="tanka1"> ラジオ<input type="radio" name="kosu1" id="rad1" value="1">1 <input type="radio" name="kosu1" id="rad1" value="1">2 <input type="submit" value="送信" onclick=check();> </form> </body> </html> 【2ページ目ソース】 <html> <head> <title>2page</title> <script> window.onload=function (){ document.F2.tanka1.value=window.opener.document.F1.tanka1.value; document.F2.rad1.value=window.opener.document.F1.rad1.value; } </script> </head> <body> <form name="F2"> 1page目テキスト<input type="text" id="tanka1"> 1page目ラジオ<input type="text" id="rad1"> </body> </html> これで実行すると、テキストの方はきちんと値が入るのですが、ラジオのほうが「undefined」と入ってしまいます。 正常に、選んだラジオボタンのvalueが入るようにするにはどうしたらいいでしょうか？

  • JavaScript暦1ヶ月未満のペーペーです。

    JavaScript暦1ヶ月未満のペーペーです。 JavaScriptでテキストとラジオボタンの値を同時に別ページへ渡すものを作っているのですが、過去の質問とは微妙に違っていて困っています。 現在ページを２つ作っていて、1ページ目で入力した値(選択したラジオボタンの値）を2ページ目に渡したいのですが、うまく渡せないでいます。 【1ページ目ソース】 <html> <head> <title>1page</title> </head> <body> <form name="F1" onsubmit="window.open('2page.html','_blank','');return false;"> テキスト<input type="text" id="tanka1"> ラジオ<input type="radio" name="kosu1" id="rad1" value="1">1 <input type="radio" name="kosu1" id="rad1" value="1">2 <input type="submit" value="送信" onclick=check();> </form> </body> </html> 【2ページ目ソース】 <html> <head> <title>2page</title> <script> window.onload=function (){ document.F2.tanka1.value=window.opener.document.F1.tanka1.value; document.F2.rad1.value=window.opener.document.F1.rad1.value; } </script> </head> <body> <form name="F2"> 1page目テキスト<input type="text" id="tanka1"> 1page目ラジオ<input type="text" id="rad1"> </body> </html> これで実行すると、テキストの方はきちんと値が入るのですが、ラジオのほうが「undefined」と入ってしまいます。 正常に、選んだラジオボタンのvalueが入るようにするにはどうしたらいいでしょうか？

  • 親ページを閉じたときにサブウィンドウも閉じたい

    こんにちは。 Javascriptでわからないことがあります。 アルバムを作っていて、画像をクリックすると、サブウインドウが表示されて、大きな画像が見られるようなページを作りたかったので、ネットで見つけたものを記載しました。 HEAD部分に以下を記載しました。 <SCRIPT LANGUAGE="JavaScript"> <!-- function new_win6(){window.open("サブウインドウ","","width=300,height=200"); } function win_close(){myWin.close(); } //--> </SCRIPT> BODY内には以下を記載しました。 <a href="#" onClick="JavaScript:new_win6();return false"> </a> 無事、サブウインドウが開いてできたのですが、そのあと別のページにとんだり、ウインドウを閉じたときに、サブウインドウが自動的に閉じるようにしたいと思っています。 本やネットで色々調べてみたのですが、つまづいてしまいました。 BODY部分にこのようなソースを記載すればいいというものじゃないのですよね？ onload="win_open()" onunload="win_close()" 知らなすぎて申し訳ありませんが、ご教授願います。 よろしくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する