人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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>

●質問者: clab_yasu
●カテゴリ:ウェブ制作
✍キーワード:.jpg AAA ALL DOC HTML
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● y-kawaz
●35ポイント

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

doc.body.innerHTML や

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

◎質問者からの返答

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

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

修正箇所→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でも行いたいと思います。

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


2 ● Cherenkov
●35ポイント

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

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

参考

◎質問者からの返答

ありがとうございます。

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

大変参考になりました。

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ