javascriptについて質問です。

iframeに表示されたhtmlを取得したいと考えております。
「テキスト」は取得できたのですが、「タグ付きのテキスト」と「画像」の取得方法が分かりません。
例えば「画像」を選択した場合は「<img src="img.jpg">」または「img.jpg」を取得したいと考えております。
ご教授よろしくお願いいたします。

1)iframe内の選択した文字を取得するプログラム

function GET_item() {
if (document.all) {
// IE
doc = frames[0].document;
AAA = doc.selection.createRange().text;
} else {
doc = document.getElementById("edit").contentDocument;
AAA = doc.getSelection();
}
$('#preview').html(AAA);//ここに表示
}
2)iframeに読み込んだ内容

<div>
<img src="img.jpg">
<font size="7">あいうえお</font>
</div>

回答の条件
  • 1人10回まで
  • 登録:2010/01/26 15:32:08
  • 終了:2010/01/27 10:13:03

回答(2件)

id:y-kawaz No.1

y-kawaz回答回数1420ベストアンサー獲得回数2252010/01/26 17:19:33

ポイント35pt

iframe の document(contentDocument) まで取れているなら、

doc.body.innerHTML や

doc.body.getElementsByTagName("img")[0].src とかでHTMLやその他なんでも取得出来るかと思います。

id:clab_yasu

コメントを修正させていただきました。

下記プログラムにて「選択中」の文字や画像をタグ付きで取得できました。

修正箇所→createRange().htmlText;

但しIEのみです。

-----------------------------------------

function GET_item() {

if (document.all) {

// IE

doc = frames[0].document;

AAA = doc.selection.createRange().htmlText;

} else {

doc = document.getElementById("edit").contentDocument;

AAA = doc.getSelection();

}

alert(AAA);

}

-----------------------------------------

同じ動作をFireFoxでも行いたいと思います。

おわかりになる方よろしくお願いいたします。

2010/01/26 22:36:26
id:Cherenkov No.2

Cherenkov回答回数1502ベストアンサー獲得回数4922010/01/27 06:28:05

ポイント35pt

Firefox 3.6で確認。IE8でちょっと確認。

  • 過去の質問をベースにしてサンプルを作ってみました。jQueryが使えるようなので所々いれてあります。
  • Firefoxだと右から左に選択して最後(たぶんfocusNode)が"\n"だった場合なぜか表示されません。

DOM rangeやselectorの扱いに不慣れなので恐縮ですが、少しでも参考になれば。


index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

function GET_item() {
  var doc,AAA;

  // IE
  if (document.all) {
    doc = frames[0].document;
    AAA = doc.selection.createRange().htmlText;
    $("#result").val(AAA);

  // Firefox
  } else {
    // jQueryを使わずに安全にiframeのwindowを得るにはたぶんこう。(jQueryが安全かどうかは知らない)
    // var windowWrapper = new XPCNativeWrapper(window.content.window.document.getElementById("edit").contentWindow);
    // var sel = windowWrapper.getSelection();

    var nw = $("#edit")[0].contentWindow;
    var sel = nw.getSelection();
    var range = sel.getRangeAt(0);

    // rangeオブジェクトからdocument fragmentに変換。
    var df = range.cloneContents();
    //console.log(df) //srcだけを得たい場合はdfのchildNodesをFirebugで覗く。

    var selectNodeBox = [];
    // 選択したノードのinnerHTMLを得るために空のdivにいれる。
    for(var i=0; i<df.childNodes.length; i++) {
      var div = document.createElement("div");
      div.appendChild(df.childNodes[i]);
      selectNodeBox.push(div);
    }
    // innerHTMLにして詰め替える。
    var htmlBox = selectNodeBox.map(function(e){
      return e = e.innerHTML;
    });

    $("#result").val(htmlBox.join("\n"));
  }
}

</script>
</head>
<body>
<a href="javascript:GET_item()">選択範囲を取得</a>
<br>
<iframe id="edit" width="500px" src="test.html"></iframe>
<br>
<textarea id="result" cols="80" rows="5"></textarea>
</body>
</html>

test.html

<div id="test">あいうえお</div>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif">
<img src="http://s.twimg.com/images/twitter_logo_header.png">

参考

id:clab_yasu

ありがとうございます。

文字の取得で少し結果が異なる部分がございましたが、

大変参考になりました。

ありがとうございました。

2010/01/27 10:11:40

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません