javascript实现划词标记划词搜索功能修正版，兼容IE及FF

最新推荐文章于 2024-07-06 00:11:00 发布
最新推荐文章于 2024-07-06 00:11:00 发布
阅读量630 收藏 1
点赞数
分类专栏： javascript 文章标签： javascript ie microsoft function internet html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>继续看</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>

<body>

<SCRIPT language=JavaScript>
<!--
if (navigator.appName=="Microsoft Internet Explorer") {
document.body.οnlοad=adddiv; 
document.οnmοusedοwn=recordobj; 
document.οndblclick=dbclick; 
document.οnmοuseup=showselect;
} else
{
//firefox
window.οnlοad=adddiv(); 
window.οnmοusedοwn=recordobj; 
window.οndblclick=dbclick(); 
window.οnmοuseup=showselect;
}


var starobj,
isdb=false,
allow=true;

function isallow() 
{ 
if(allow){ 
allow=false; 
alert('is closed'); 
} 
else{ 
allow=true; 
alert('is opend'); 
} 
}

function dbclick() 
{ 
isdb=true; 
}


function recordobj(evt)  { 

evt = (evt) ? evt : ((window.event) ? window.event : "")
if (evt) {
          starobj = (evt.target) ? evt.target : evt.srcElement
}

}

function showselect(evt) { 

var obj;
var strlen;
evt = (evt) ? evt : ((window.event) ? window.event : "")
if (evt) {
if (evt.target)
{
obj = evt.target;
strlen = window.getSelection().toString();
}
else
{
obj = event.srcElement;
strlen = document.selection.createRange().text;
}
}

var str=""; 
if(obj.tagName!="A"&&obj.tagName!="INPUT"&&obj==starobj&&!isdb&&allow) 
{ 




if(strlen.length>0)
{

 str=strlen; 
 
} 


}

 
searchgoogle(str,evt); 

isdb=false; 
}

function searchgoogle(str,evt) 
{ 
var obj=document.getElementById("searchgoogle"); 

if(str.toString().length>0) 
{

obj.style.display="block"; 
obj.style.position="absolute"; 
obj.style.zindex=999;

if(navigator.appName=="Microsoft Internet Explorer")
{
obj.style.widht=80;

obj.style.posTop=document.body.scrollTop+event.y-25; 
obj.style.posLeft=document.body.scrollLeft+event.x+5;  
}
else
{
obj.style.width = "100px";
obj.style.top=evt.pageY-25;
obj.style.left=evt.pageX+5;
}
 
 
obj.innerHTML="<a target=_blank href=http://www.google.com/search?ie=UTF-8&oe=UTF-8&q="+encodeURI(str)+" style='BORDER- RIGHT: royalblue thin solid; BORDER-TOP: royalblue thin solid; FONT- WEIGHT: bold; BORDER- LEFT: royalblue thin solid; CLIP: rect(auto auto auto auto); COLOR: #ffffff; BORDER- BOTTOM: royalblue thin solid; BACKGROUND-COLOR: inactivecaption; TEXT- DECORATION: none'>Search It！</a>"; 
} 
else 
{ 

obj.style.display="none"; 
} 
}

function adddiv() 
{
var mobj = document.createElement("div"); 
mobj.id="searchgoogle";
document.body.appendChild(mobj); 

} 
//--> 
</SCRIPT>
<INPUT type="button" onClick="isallow()" value="关闭/打开划词功能">
<p>继续看翻译宝</p>
</body>
</html>

twosecond
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
如何用JS实现“划词高亮标记”的在线笔记功能？
前端基础入门学习线路
02-11 5235
. 什么是“划词高亮”？ 　　有些同学可能不太清楚“划词高亮”是指什么，下面就是一个典型的“划词高亮”： 　　用户选择一段文本（即划词），即会自动将这段选取的文本添加高亮背景，用户可以很方便地为网页添加在线笔记。 　　笔者前段时间为线上业务实现了一个与内容结构非耦合的文本高亮在线笔记功能。非耦合是指不需要为高亮功能建立特殊的页面 DOM 结构，而高亮功能对业务近乎透明。该功能核心部分...
javascript实现划词标记+划词搜索功能
10-31
javascript实现划词标记+划词搜索功能
前端js实现点击文字弹出小框
SoWhatWorld的博客
02-11 2413
效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px; ...
js划词翻译、屏幕取词，取词位置获取（真正解决定位问题）
热门推荐
slongzhang的博客
01-03 8万+
划词、鼠标选词、翻译这些都是很简单的事一般熟悉js鼠标事件都能搞定，而比较难的是怎么确定我们选中的词在哪个位置执行完翻译的结果该怎么定位，这个问题我在开发翻译插件时摸了个深坑，全网搜索不到可用方案，研究有道的划词翻译插件因它代码压缩也没发现他的解决方案，最终在火狐开发文档里找到了normalize才真正解决了定位问题； 鼠标按下弹起和移动的事件这里就不贴代码了，懂的不需要我贴代码，不懂的去菜鸟或w3c那里讲得更详细 获取鼠标选中的词 var selectText = function(){ va.
js划词搜索(网上流传)
weixin_30237281的博客
07-24 526
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"> <html> <head> <title>UntitledDocument</title> <metahttp-equiv="Content-Type"content="tex...
javascript 实现划词标记划词搜索功能
10-29
在页面中加上这串代码就行了，同时还有搜索功能。
javascript实现划词标记+划词搜索功能.docx
01-13
javascript实现划词标记+划词搜索功能.docx
js获取鼠标划词
xueliang59211的专栏
06-09 782
function getSelectText() { var txt = null; if (window.getSelection){ // mozilla FF txt = window.getSelection(); }else if (document.getSelection){ txt = document.g...
javascript实现划词标记+划词搜索功能代码实例
u011425213的专栏
07-17 1832
Untitled Document          document.body.onload=adddiv;  document.onmousedown=recordobj;  document.ondblclick=dbclick;  document.onmouseup=showselect;  var starobj,isdb=false,allow=true; 
javascript 页面划词搜索JS
10-29
个脚本是网上的代码修改的，兼容各主流浏览器，优化页面异步加载的文字的检索提示框定位，根据选择文字位置与屏幕尺寸计算检索提示框定位。
基于jquery的页面划词搜索JS
12-09
基于Jquery修改，以下为全部脚本 代码如下: //划词搜索 var GLS = {}; GLS.startObj = null; GLS.isdb = false; GLS.allow = true; GLS.isallow = function() { if (GLS.allow) { GLS.allow = false; alert(‘Google搜索已关闭’); } else { GLS.allow = true; alert(‘Google搜索已打开’); } }; GLS.dblclick = function() { GLS.isdb = true; }; GLS.mouse
✨如何用JS实现“划词高亮”的在线笔记功能？✨
weixin_33962923的博客
04-21 684
1. 什么是“划词高亮”？ 有些同学可能不太清楚“划词高亮”是指什么，下面就是一个典型的“划词高亮”： 上图的示例网站可以点击这里访问。用户选择一段文本（即划词），即会自动将这段选取的文本添加高亮背景，用户可以很方便地为网页添加在线笔记。 笔者前段时间为线上业务实现了一个与内容结构非耦合的文本高亮在线笔记功能。非耦合是指不需要为高亮功能建立特殊的页面 DOM 结构，而高亮功能对业务近乎透明。该功...
Javascript实现划词标记+划词搜索功能代码实例
web开发自学
09-08 455
&lt;!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Javascript实现划词标记+划词搜索功能代码实例&lt;/title&gt; &lt;metahttp-equiv="Content-Type"content="
vue输入框只准许输入数字
zwy15841139493的博客
06-30 1262
vue Vuetify
ES6 新特性有哪些
最新发布
weixin_64684095的博客
07-06 1001
1. 拥有块级作用域，这意味着在 if 语句、for 循环、while 循环等代码块中声明的 let 变量，只在该代码块内有效。2. 不允许在同一作用域内重复声明同一个变量1. 也具有块级作用域。2. 声明时必须进行初始化赋值，且赋值后不能再重新赋值修改其值。3. 如果 const 声明的是一个对象或数组，虽然不能重新赋值整个对象或数组，但可以修改对象的属性值或数组的元素值。
chrome网页划词翻译-javascript
09-07
Chrome网页划词翻译是一种通过JavaScript实现的功能，在浏览器中，我们可以通过划选文本来进行简单的翻译操作。具体实现的步骤如下： 1. 首先，我们需要通过JavaScript来监听鼠标动作，判断用户是否进行了文本的划选操作。 2. 当用户进行了划选操作后，我们需要获取到用户选中的文本内容。通过JavaScript内置的API，我们可以轻松地获取到选中文本的内容。 3. 接下来，我们需要将获取到的文本内容发送给翻译服务。在这里，我们可以使用一些翻译API，如有道翻译或谷歌翻译API等。将获取到的文本内容作为参数发送到API接口中，获取到翻译结果。 4. 最后，我们再通过JavaScript将翻译结果展示给用户。可以通过创建一个弹出框或在页面上显示翻译结果的方式展示给用户。 此外，我们还可以添加一些其他的功能，如判断是否为英文文本，如果是英文文本则直接调用浏览器的自带翻译功能，避免重复翻译。同时，我们还可以通过设置选项来让用户自定义翻译服务，提高用户的体验。 总之，Chrome网页划词翻译是一种通过JavaScript实现的功能，通过监听鼠标动作和调用翻译API来实现用户对选中文本的翻译操作。这种功能可以提高用户的浏览体验，使用户可以方便地获取到文本的翻译结果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值