<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>西红柿爱番茄 &#187; Range</title>
	<atom:link href="http://www.ilovejs.net/archives/tag/range/feed" rel="self" type="application/rss+xml" />
	<link>http://www.ilovejs.net</link>
	<description>到了创造为主的阶段，不忘继续学习</description>
	<lastBuildDate>Thu, 15 Dec 2011 06:18:39 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>获取文档选取的文本</title>
		<link>http://www.ilovejs.net/archives/76</link>
		<comments>http://www.ilovejs.net/archives/76#comments</comments>
		<pubDate>Thu, 24 Dec 2009 13:26:16 +0000</pubDate>
		<dc:creator>Supersha</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Range]]></category>

		<guid isPermaLink="false">http://www.ilovejs.net/?p=76</guid>
		<description><![CDATA[近日写了一个获取文档选择文本的封装的对象Range，这可是使得获取文档的文本非常的方便，在某些应用中可以用到（比如爱词霸网站的划词翻译的功能，划词搜索功能，划词赋值功能等等）它兼容现在流行的浏览器（FF，Opera，Safari，Google Chrome，IE6及以上版本），操作方式如下： [javascript] Range.callback = function(){ alert(Range.text); } [/javascript] 只需要调用Range的callback方法，在该方法内调用执行Range的text属性，就可以获取已选择的文本，同时Range对象支持在iframe中获取选择的内容。测试页面。下面提供Range的源码： [javascript] (function(){ var global = this; //获取Range的开始index，在FF等浏览器下支持 function getSelectionStart(o){ return &#8230; <a href="http://www.ilovejs.net/archives/76" class="more-link">了解更多</a>]]></description>
			<content:encoded><![CDATA[<p>近日写了一个获取文档选择文本的封装的对象Range，这可是使得获取文档的文本非常的方便，在某些应用中可以用到（比如<a href="http://www.iciba.com/">爱词霸</a>网站的划词翻译的功能，划词搜索功能，划词赋值功能等等）它兼容现在流行的浏览器（FF，Opera，Safari，Google Chrome，IE6及以上版本），操作方式如下：
</p>
<p>[javascript]<br />
Range.callback = function(){<br />
    alert(Range.text);<br />
}<br />
[/javascript]</p>
<p>只需要调用Range的callback方法，在该方法内调用执行Range的text属性，就可以获取已选择的文本，同时Range对象支持在iframe中获取选择的内容。<a href="http://www.ilovejs.net/lab/range.html">测试页面</a>。下面提供Range的源码：
</p>
<p><span id="more-76"></span><br />
[javascript]<br />
(function(){<br />
    var global = this;<br />
    //获取Range的开始index，在FF等浏览器下支持<br />
    function getSelectionStart(o){<br />
        return o.selectionStart;<br />
    };<br />
    //获取Range的结束index，在FF等浏览器下支持<br />
    function getSelectionEnd(o){<br />
        return o.selectionEnd;<br />
    };<br />
    //获取选择的文本<br />
    function getRangeText(doc, el){<br />
        var text = &quot;&quot;;<br />
        //如果是text或者textarea控件<br />
        if ((el.nodeName.toLowerCase() === &quot;input&quot; || el.nodeName.toLowerCase() === &quot;textarea&quot;) &amp;&amp; document.getSelection) {<br />
            s = getSelectionStart(el);<br />
            end = getSelectionEnd(el);<br />
            text = el.value.slice(s, end);<br />
        }<br />
        else {<br />
            if (doc.getSelection) { //IE<br />
                text = doc.getSelection() || doc.getSelection();<br />
            }<br />
            else<br />
                if (doc.selection.createRange) {<br />
                    text = doc.selection.createRange().text;<br />
                }<br />
        }<br />
        return text;<br />
    };<br />
    //判断是否有iframe框架<br />
    function hasIframe(){<br />
        return document.getElementsByTagName(&quot;iframe&quot;).length &gt; 0;<br />
    }<br />
    //获取全部iframe框架引用<br />
    function getIframeObject(){<br />
        var iframes = document.getElementsByTagName(&quot;iframe&quot;);<br />
        var docs = [];<br />
        //跨浏览器<br />
        for (var i = 0; iframes[i]; i++) {<br />
            var doc = iframes[i].document;<br />
            if (iframes[i].contentDocument) {<br />
                doc = iframes[i].contentDocument;<br />
            }<br />
            else<br />
                if (iframes[i].contentWindow.document) {<br />
                    doc = iframes[i].contentWindow.document;<br />
                }<br />
            docs.push(doc);<br />
        }<br />
        return docs;<br />
    }<br />
    //添加事件<br />
    function addEvent(elem, t, handler){<br />
        if (elem.addEventListener) {<br />
            elem.addEventListener(t, handler, false);<br />
        }<br />
        else<br />
            if (elem.attachEvent) {<br />
                elem.attachEvent(&quot;on&quot; + t, handler);<br />
            }<br />
    }<br />
    //声明Range对象<br />
    !global.Range ? global.Range = {} : null;<br />
    //mouseup事件的回调函数<br />
    function handler(doc, e){<br />
        var text = &quot;&quot;;<br />
        var el = e.target || e.srcElement;<br />
        text = getRangeText(doc, el);<br />
        if (text == &quot;&quot;)<br />
            return;<br />
        Range.text = text;<br />
        Range.callback();<br />
    }<br />
    addEvent(window, &quot;load&quot;, function(e){<br />
        //本文档的document的mouseup事件驱动程序<br />
        var evt = function(e){<br />
            handler(document, e);<br />
        };<br />
        addEvent(document, &quot;mouseup&quot;, evt);<br />
        //如果存在iframe框架，则给iframe框架添加mouseup事件驱动程序<br />
        if (hasIframe()) {<br />
            var docs = getIframeObject();<br />
            for (var i = 0, l = docs.length; i &lt; l; i++) {<br />
                (function(doc){<br />
                    addEvent(doc, &quot;mouseup&quot;, function(e){<br />
                        handler(doc, e);<br />
                    });<br />
                })(docs[i]);<br />
            }<br />
        }<br />
    });<br />
})();<br />
[/javascript]</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ilovejs.net/archives/76/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

