21

次の非常に単純なhtmlページがあります。

<html>
    <head>
    <script type="text/javascript">
        function alertSelection()
        {
            var selection = window.getSelection();
            var txt = selection.toString();
            alert(txt);
        }
    </script>
    </head>
    <body>
        This is <span style="background-color:black;color:white">the</span> text.
        <div style="background-color:green;width:30px;height:30px;margin:30px"
            onmouseover="alertSelection()">
    </body>
</html>

最初の行全体を選択して正方形の上にマウスを置くと、「これはテキストです」というアラートが表示されます。

スパンタグまたはその他の選択されたHTMLがアラートメッセージから削除されないようにするには、どうすればよいですか？

編集：私は特にから完全なHTMLを取得する方法を探していますwindow.getSelection()。アラートダイアログは、私がコードを検証しようとしていた方法でした。私はこれがSafariで動作することだけを心配しています。

4

3 に答える 3

67

これは、すべての主要なブラウザで現在選択されているHTMLに対応するHTMLを取得する関数です。

function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    return html;
}

alert(getSelectionHtml());
于 2011-01-10T23:45:34.177 に答える
10

Rangyを使用する：https ：//github.com/timdown/rangy

クロスブラウザの範囲と選択ライブラリ。

ここでデモをチェックしてください：http：//rangy.googlecode.com/svn/trunk/demos/index.html

于 2011-01-10T23:47:17.167 に答える
2

警告ボックスにはHTMLは表示されず、プレーンテキストのみが表示されます。HTMLをアラートボックスに表示させることはできません。

できることは、 jQuery Dialog、jQueryプラグイン、またはその他の完全なものalertなど、代わりにJSアラートボックスの置換を使用することです。

于 2011-01-10T23:32:52.410 に答える