如何在包含iframe或仅包含框架的HTML文档中查找选择 [英] How to find selection in HTML document that contains iframe or just frames

问题描述

如果文本可能位于其中一个框架（或iframe）内，是否有方法在HTML文档中查找所选文本？

如果文档具有没有框架很简单：

  var text; 
 if（document.getSelection）{
 // Firefox和朋友
 text = document.getSelection（）; 
} else if（document.selection）{
 // IE 
 text = document.selection.createRange（）; 
} 
 if（text == undefined || text ==''）{
 //迭代所有textarea元素并查看其中一个元素是否有选择
 var areas = document.getElementsByTagName（ 'textarea的'）; 
 for（var i = 0; i = areas.length; i ++）{
 if（areas [i] .selectionStart！= undefined&& 
 areas [i] .selectionStart！ = areas [i] .selectionEnd）{
 text = areas [i] .value.substring（areas [i] .selectionStart，a [i] .selectionEnd）; 
休息; 
 
 
 
 //现在如果文档选择了文本，它就是文本
  

因此，这可以跨浏览器（尽管不是很漂亮）。

问题是文档包含帧或iframe时。
框架拥有自己的文档，因此仅使用上面的代码是不够的。
有人可能会遍历帧树并搜索其中一个选定的文本，但是一般帧可以具有来自不同域的内容，所以即使我要遍历所有帧和所有子帧等根文档搜索选定的文本我不会有权限访问他们的HTML，对吧？所以，我无法获得他们选定的文本。

是否有一种（简单）可靠的方式在网页上查找所选文本，即使页面包含请问我的问题，在回答我自己的问题后，多一点调查：
所以，如果帧是不同的域名，那么你无法做到这一点，因为你没有权限访问他们的dom。但是，在所有框架都在同一个域上（例如gmail）的通常情况下，只是像树一样迭代主题。以下是完成此操作的代码：

下面的代码用于记录所选文本的字符和单词的书签：

  javascript：（function（）{
 //功能：找到文档d上的选定文本
 // @返回选定的文本或空
函数f（d）{
 var t; 
 if（d.getSelection）t = d.getSelection（）; 
 else if（d.selection）t = d.selection。 createRange（）; 
 if（t.text！= undefined）t = t.text; 
 if（！t || t ==''）{
 var a = d.getElementsByTagName （'textarea'）; 
 for（var i = 0; i< a.length; ++ i）{
 if（a [i] .selectionStart！= undefined&& a [ i] .selectionStart！= a [i] .selectionEnd）{
t = a [i] .value.substring（a [i] .selectionStart，a [i] .selectionEnd）; 
 break; 
} 
} 
} 
返回t; 
}; 
 //功能：找到文档d中的选定文本以及d $ b $的帧和子帧b // @返回选定的文本或空
函数g（d）{
 var t; 
 try {t = f（d）;} catch（e）{}; 
 if（！t || t ==''）{
 var fs = d.getElementsByTagName（'frame'）; 
 for（var i = 0; i< fs.length; ++ i）{
 t = g（fs [i] .contentDocument）; 
 if（t&& t.toString（）！=''）break; 
} 
 if（！t || t.toString（）==''）{
 fs = d.getElementsByTagName（'iframe'）; 
 for（var i = 0; i< fs.length; ++ i）{
 t = g（fs [i] .contentDocument）; 
 if（t&& t.toString（）！=''）break; 
} 
} 
} 
 return t; 
}; 
 var t = g（document）; 
 if（！t || t ==''）alert（'请选择一些文本'）; 
 else alert（'Chars：'+ t.toString（）。length +'\\\
Words：'+ t.toString（）。match（/（\ S +）/ g）.length）; 
}）（）
  

Is there a way to find the selected text in an HTML document if the text may be within one of its frames (or iframes)?

If the document has no frames it's simple:

var text;
if (document.getSelection) {
 // Firefox and friends
 text = document.getSelection();
} else if (document.selection) {
 // IE 
 text = document.selection.createRange();
}
if (text == undefined || text == '') {
 // Iterate over all textarea elements and see if one of them has selection
 var areas = document.getElementsByTagName('textarea');
 for(var i = 0; i = areas.length; i++) {
  if(areas[i].selectionStart != undefined && 
     areas[i].selectionStart != areas[i].selectionEnd){
   text = areas[i].value.substring(areas[i].selectionStart, a[i].selectionEnd);
   break;
  }   
 }   
}
// Now if document has selected text, it's in text

So this works cross-browser (although not very pretty).

The problem is when the document contains frames or iframes. Frames have their own document, so just using the code above is not enough. One could potentially iterate over the frames tree and search for selected text in one of them, however in general frames can have content from different domains, so even if I were to iterate over all frames and over all subframes etc of the root document in search of selected text I would not have had the permission to access their HTML, right? So I wouldn't be able to get their selected text.

Is there a (simple) reliable way of finding the selected text on a web page even if the page contains frames?

Thanks

解决方案

To answer my own question, after a bit more investigation: So, if frames are of different domains then there's nothing you can do about it since you have no permission accessing their dom. However, in the common case where all frames are on the same domain (e.g. gmail) just iterate theme all like a tree. Here's the code that accomplishes that:

The code below is for a bookmarklet that counts chars and words of the selected text:

javascript:(function(){
  // Function: finds selected text on document d.
  // @return the selected text or null
  function f(d){
    var t;
    if (d.getSelection) t = d.getSelection();
    else if(d.selection) t = d.selection.createRange();
    if (t.text != undefined) t = t.text;
    if (!t || t=='') {
      var a = d.getElementsByTagName('textarea');
      for (var i = 0; i < a.length; ++i) {
        if (a[i].selectionStart != undefined && a[i].selectionStart != a[i].selectionEnd) {
          t = a[i].value.substring(a[i].selectionStart, a[i].selectionEnd);
          break;
        }
      }
    }
    return t;
  };
  // Function: finds selected text in document d and frames and subframes of d
  // @return the selected text or null
  function g(d){
    var t;
    try{t = f(d);}catch(e){};
    if (!t || t == '') {
      var fs = d.getElementsByTagName('frame');
      for (var i = 0; i < fs.length; ++i){
        t = g(fs[i].contentDocument);
        if(t && t.toString() != '') break;
      }
      if (!t || t.toString() == '') {
        fs = d.getElementsByTagName('iframe');
        for (var i = 0; i < fs.length; ++i){
          t = g(fs[i].contentDocument);
          if(t && t.toString() != '') break;
        }
      }
    }
    return t;
  };
  var t= g(document);
  if (!t || t == '') alert('please select some text');
  else alert('Chars: '+t.toString().length+'\nWords: '+t.toString().match(/(\S+)/g).length);
})()

这篇关于如何在包含iframe或仅包含框架的HTML文档中查找选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！