如何将 getSelection 与 iframe 一起使用答案

【问题标题】：How to use getSelection with an iframe如何将 getSelection 与 iframe 一起使用
【发布时间】：2014-07-30 13:11:27
【问题描述】：

我一直在尝试使用 getSelection 命令从 iframe 中选择突出显示的文本并将其插入到变量中。使用下面的代码，我可以使它成为一个文本区域。

   <script type="text/javascript">
    function GetSelectedText () {
        var selText = "";
        if (window.getSelection) {
            if (document.activeElement && 
                    (document.activeElement.tagName.toLowerCase () == "textarea" ))
            {
                var text = document.activeElement.value;
                selText = text.substring (document.activeElement.selectionStart, 
                                          document.activeElement.selectionEnd);
            }
            else {
                var selRange = window.getSelection ();
                selText = selRange.toString ();
            }
        }


        else {
            if (document.selection.createRange) {
                var range = document.selection.createRange ();
                selText = range.text;
            }
        }

var highlight = selText;
        if (highlight !== "") {
            alert (highlight);
        } 
        if (highlight == "") {
            alert ("No string selected");
        }


    } </script>
<body >
<br /><br />
<textarea  onclick="GetSelectedText ()">Some text in a textarea element.</textarea>
</body>

但是当我添加以下代码行时，它仍然不会在 iframe 中执行。

|| document.activeElement.tagName.toLowerCase () == "iframe"

如何解决此问题，以便突出显示 iframe 中的字符串并执行脚本？

更新：

    <script type="text/javascript">
    var editorDoc;
    function InitEditable () {
        var editor = document.getElementById ("editor");

        if (editor.contentDocument)
            editorDoc = editor.contentDocument;
        else
            editorDoc = editor.contentWindow.document;

        var editorBody = editorDoc.body;

        if ('contentEditable' in editorBody) {
                // allow contentEditable
            editorBody.contentEditable = true;
        }
        else {  // Firefox earlier than version 3
            if ('designMode' in editorDoc) {
                    // turn on designMode
                editorDoc.designMode = "on";                
            }
        }
    }
    var iframe = document.getElementById('editor');
var innerDoc = iframe.contentDocument;

function GetSelectedText () {
    var selText = "";
    if (innerDoc.getSelection) {
        if (innerDoc.activeElement && 
                (innerDoc.activeElement.tagName.toLowerCase () == "iframe"))
        {
            var text = innerDoc.activeElement.value;
            selText = text.substring (innerDoc.activeElement.selectionStart, 
                                      innerDoc.activeElement.selectionEnd);
        }
        else {
            var selRange = innerDoc.getSelection ();
            selText = selRange.toString ();
        }
    }


    else if
         (innerDoc.selection.createRange) {
            var range = innerDoc.selection.createRange ();
            selText = range.text;
        }


var highlight = selText;
    if (highlight !== "") {
        alert (highlight);
    } 
    if (highlight == "") {
        alert ("No string selected");
    }


}

</script>

<body onload="InitEditable ();">

<iframe onclick="GetSelectedText ()" id="editor"></iframe>

</body>

【问题讨论】：

标签： javascript iframe getselection

【解决方案1】：

听起来脚本在 iframe 的父窗口中运行。因此，您需要使用与document 不同的对象来访问它：

var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument;

【讨论】：

嘿，我是 javascript 的新手，我应该在哪里添加这些变量，我会在上面的脚本中进行哪些更改？提前致谢！
您可能希望用“innerDoc”替换几乎所有对“document”的引用。我认为替换“窗口”也是如此。还注意到您的代码的其他内容：else { if (document.selection.createRange) {var range = document.selection.createRange();selText = range.text;}} 有点冗长。你可以说else if (logical expression) {/*statement*/}
再次感谢，我刚刚使用更新的代码块编辑了我的帖子，现在看起来是否正确，或者我错过了什么？
最好的办法是尝试一下 :) 你听说过jsfiddle.net 吗？看看你能不能做一个，我可以帮你。此外，您在第 5-9 行中缺少一些括号