如何使用JavaScript从iframe中获取选定的文本？

Question

如何使用JavaScript从iframe中获取选定的文本？

22

<html>
 <body>
  <script type="text/javascript">

   function smth() {

    if (document.getSelection) {
    var str = document.getSelection();
    if (window.RegExp) {
      var regstr = unescape("%20%20%20%20%20");
      var regexp = new RegExp(regstr, "g");
      str = str.replace(regexp, "");
    }
    } else if (document.selection && document.selection.createRange) {
     var range = document.selection.createRange();
     var str = range.text;
    }   

    alert(str);
   }
  </script>   

    <iframe id="my"  width="300" height="225">
   .....some html ....
    </iframe>      

    <a href="#" onclick="smth();">AA</a>
 </body>    
</html>

使用smth函数可以从某个

元素中获取所选文本，但在iframe中无效。有什么方法可以从iframe中获取所选文本吗？

- mm.

5个回答

11

你需要从iframe中的文档/窗口获取选择内容。

function getIframeSelectionText(iframe) {
  var win = iframe.contentWindow;
  var doc = win.document;

  if (win.getSelection) {
    return win.getSelection().toString();
  } else if (doc.selection && doc.selection.createRange) {
    return doc.selection.createRange().text;
  }
}

var iframe = document.getElementById("my");
alert(getIframeSelectionText(iframe));

- Tim Down

6

如果来自不同域的iframe中的数据，你无法访问。这是由于同源策略导致的。

- Luca Matteis

2

抱歉，我的例子有误。在 iframe 中，我有文本，我使用 iframe 作为所见即所得编辑器，因此它不在不同的域上。 - mm.

2

这段代码适用于所有现代浏览器：

var iframe = document.getElementById('my');
var idoc = iframe.contentDocument || iframe.contentWindow.document; // ie compatibility
var text = idoc.getSelection().toString();

- ykay says Reinstate Monica

2

以下代码将返回所选文本。

function getSelectedText(frameId) { 
    // In ExtJS use: 
    // var frame = Ext.getDom(frameId); 
    var frame = document.getElementById(frameId); 

    var frameWindow = frame && frame.contentWindow; 
    var frameDocument = frameWindow && frameWindow.document; 

    if (frameDocument) { 
        if (frameDocument.getSelection) { 
            // Most browsers 
            return String(frameDocument.getSelection()); 
        } 
        else if (frameDocument.selection) { 
            // Internet Explorer 8 and below 
            return frameDocument.selection.createRange().text; 
        } 
        else if (frameWindow.getSelection) { 
            // Safari 3 
            return String(frameWindow.getSelection()); 
        } 
    } 

    /* Fall-through. This could happen if this function is called 
       on a frame that doesn't exist or that isn't ready yet. */ 
    return ''; 
}

希望这能对某些人有所帮助。

- Nandha

在Firefox的控制台中：错误：拒绝访问属性“document”。它在这一行：“var frameDocument = [...]”中。 - Piotrek

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bobince · Accepted Answer

document.getSelection

这是在外部文档上的。如果要获取iframe中文档的选择内容，需要获取内部文档：

var iframe= document.getElementById('my');
var idoc= iframe.contentDocument || iframe.contentWindow.document; // ie compatibility

idoc.getSelection()

需要注意的是，WebKit不支持document.getSelection() 或者 document.selection。尝试使用window.getSelection()替换它，在Firefox和WebKit中都能正常工作，但是返回一个选择对象（一个围绕范围的集合/包装器），需要转化为字符串：

var idoc= iframe.contentDocument || iframe.contentWindow.document;
var iwin= iframe.contentWindow || iframe.contentDocument.defaultView;

''+iwin.getSelection()

我不太确定这个的意义是什么：

if (window.RegExp) {
  var regstr = unescape("%20%20%20%20%20");
  var regexp = new RegExp(regstr, "g");
  str = str.replace(regexp, "");
}

RegExp是最早的 JavaScript 基础，它将一直存在，您无需嗅探。多个空格的 URL 编码是非常不必要的。您甚至不需要使用 RegExp，可以将字符串替换写成：

str= str.split('     ').join('');