360浏览器下“划词搜索工具条”的隐藏 #21

abeet · 2017-02-13T13:26:10Z

360浏览器下“划词搜索工具条”的隐藏

问题：

农业社智汇三农项目，图书阅读页，在选中一段文字后松开鼠标，脚本监听onmouseup，通过window.getSelection()方法取到被选中的内容，则显示一个浮动工具条上面有三个按钮“复制”“纠错”“收藏简报”。问题是在360浏览器下，选中一段文字后，会弹出“划词搜索工具条”，干扰这个自定义的工具条。希望能让“划词搜索工具条”不要出现。

查询资料

先别埋头写代码，看别人有没有遇到过这个问题，并且是怎么解决的，
在百度里换了各种搜索词，都没有找到想要的答案，与之相关的内容，都是建议在360浏览器的选项里关掉“划词搜索工具条”。
所以这个问题只能自己想办法解决了。

思考1

是否有一个事件会在显示“划词搜索工具条”出现之前触发，只要取消这个事件就能取消“划词搜索工具条”的出现。

验证1

写脚本查找一个p标签在360浏览器下所有能接受的事件，对这此事件取消默认行为取消冒泡，看哪一个事件的取消默认行为会导致“划词搜索工具条”不再出现。

<html>
<head>
<meta charset="UTF-8">
<style>
p{background:#def; margin:10px}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div id="div1">
<p id="p1">'onmousemove','onmouseout','onmouseover','onmouseenter','onmouseleave'</p>
</div>
</body>
<script>
var body=document.body;
var $div=$('#div1');
var $p=$('#p1');
var p=$p.get(0);
var i=0;
for (k in p) {
	if (k.substr(0, 2) == 'on') {
		if (['onmousemove','onmouseout','onmouseover','onmouseenter','onmouseleave'].indexOf(k) == -1) {
			var el = $('<p>'+k+'</p>').appendTo($div).get(0);
			el.addEventListener(k.substr(2),function (evt) {
				console.log('  p  ',evt.type, evt)
				evt.preventDefault();
				evt.stopPropagation();
			}, false)
		}
		if (['onmousemove','onmouseout','onmouseover','onmouseenter','onmouseleave'].indexOf(k) == -1) {
			body.addEventListener(k.substr(2),function (evt) {
				console.log('body',evt.type, evt)
				evt.stopPropagation();
			}, false)
		}
		
	}
}
</script>
</html>

经以上脚本列出360的页面元素支持的事件，并没有比普通chrome浏览器多，取消掉 selectstart mousedown mouseup 事件会使文本无法选择，不符合要求。

结论1

也许在显示“划词搜索工具条”出现之前360会发出事件，但无法通过简单的JS查出事件，需要查看360浏览器的源码，或进行汇编调试，并且很有可能不存在这样的事件，放弃此方案。

思考2

是 mouseup 事件，还是另外一个隐含的有一个文本被选中事件会触发“划词搜索工具条”的出现？如果是两者都需要，是否可以记下当前选区，发送按键事件让“划词搜索工具条”消失，然后JS再还原选区？

验证2

先上网查一下JS获取和设置选区的资料，查到 JS Range HTML文档/文字内容选中、库及应用介绍
http://www.zhangxinxu.com/wordpress/2011/04/js-range-html%E6%96%87%E6%A1%A3%E6%96%87%E5%AD%97%E5%86%85%E5%AE%B9%E9%80%89%E4%B8%AD%E3%80%81%E5%BA%93%E5%8F%8A%E5%BA%94%E7%94%A8%E4%BB%8B%E7%BB%8D/
了解 Selection 对象的 getRangeAt addRange 方法，可写出以下代码。

var selection = window.getSelection();
if(selection && (selection.rangeCount)){
	var ranges=[]
	for(var i=0;i<selection.rangeCount;i++){
		ranges.push(selection.getRangeAt(i))  // 记下选区
	}
	selection.empty(); // 清掉选区
	for(var i=0;i<ranges.length;i++){
		selection.addRange(ranges[i]); // 重建选区
	}
}

测试后，发现调用 Selection 对象的 addRange 会触发“划词搜索工具条”的出现，说明这个工具条不是靠监听鼠标事件出现的，有更底层的方法来监听文字被选中。

结论2

不能够通过JS操作 Selection 对象来避免出现“划词搜索工具条”。
同时说明“划词搜索工具条”不是靠监听鼠标事件出现的，有更底层的方法来监听文字被选中。

思考3

禁用掉 selectstart ，正文区不再可以选择文字，自己写js监听 mousedown mouseup 完全的模拟浏览器的文字选择过程。根据鼠标的位置自己去算出哪些文字被选中了，这样的实现应该是可行的，但会有一些坑（查找字的位置，跨段落识别被鼠标划过的文字），工作量会比较大，起码需要一周的时间，再想想其他方案。

思考4

发现当浏览器中出现“划词搜索工具条”时，有几个情况下“划词搜索工具条”会自动消失掉：当前页面或窗口失去焦点，进一步尝试发现只要是任何一个元素进入聚焦状态都会让“划词搜索工具条”消失，所以问题很好解决，页面上放一个表单元素，在选中一段文本后，让这个表单元素focus，这时“划词搜索工具条”消失了。

验证4

<html>
<head>
<meta charset="UTF-8">
<style>
p{background:#def; margin:10px}
</style>
</head>
<body>
<div id="div1">
<p>中华人民共和国</p>
<p>中华人民共和国</p>
<p>中华人民共和国</p>
<p>中华人民共和国</p>
<p>中华人民共和国</p>
<p>中华人民共和国</p>
<p>中华人民共和国</p>
</div>
<div id="popMenu" style="background:#eee; border:1px solid #abc; position: fixed;left: -99em;top: 50%;">这是弹出菜单</div>
<input id="beyondViewRange" type="checkbox" style="position: fixed;left: -99em;top: 50%;" />
</body>
<script>
document.getElementById("popMenu").addEventListener('click',function(evt){
	this.style.left='-99em';
},false)
document.getElementById('div1').addEventListener('mouseup',function(evt){
	var sel = window.getSelection();
	if(sel.rangeCount > 0) {
		document.getElementById("beyondViewRange").focus()
	}
	document.getElementById("popMenu").style.left= evt.x+10+'px';
	document.getElementById("popMenu").style.top= evt.y+'px';
},false)
</script>
</html>

测试成功！！“划词搜索工具条”被隐藏。

结论4

在“划词搜索工具条”显示期间，有其他元素被focus，“划词搜索工具条”会隐藏掉。
类似的情况还有，鼠标点击、按钮按下等情况，“划词搜索工具条”也会隐藏掉，
但在测试中发现，下面的代码在chrome内核的360里有发送出按键事件但 keyCode 总是为 0 ，原因今天不再细究了，总之没有使用上下面的方案。

var e = new KeyboardEvent('keydown', {keyCode: 9,which:9});
evt.target.dispatchEvent(e);

扫尾小工作

让上面的这段代码仅在360下起作用，需要判断当前是否为360浏览器，
尝试输出 navigator.userAgent 结果为
Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.101 Safari/537.36
坑爹的360，完全没有在 userAgent 里留标识。网上查一下怎么判断 360浏览器吧。
https://segmentfault.com/q/1010000002569856
这个页面的实现非常复杂，好在我们的代码在Chrome下运行也不那么不可接受，所以对360的判断不需要那么精确，从这段代码中取出打分最高的判断：

var mayBeIs360=false;
var plugins = window.navigator.plugins || {};
for (var r in plugins) {
	if ("np-mswmp.dll" == plugins[r].filename) {
		mayBeIs360=true;
	}
}

运行以上代码，在本机上准确区分了 360极速浏览器v8.5.0 和 Chrome v55.0 浏览器。
可以使用

小结

多想几个可能性，多验证，找出一个相对简易的实现。
这次的思考过程中犯了一个错误，试图先想很正规的方案，然后才想野路子，
结果野路子的方案才是最简单，下次先想野路子 ^_^。

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

360浏览器下“划词搜索工具条”的隐藏 #21

360浏览器下“划词搜索工具条”的隐藏 #21

abeet commented Feb 13, 2017 •

edited

Loading

360浏览器下“划词搜索工具条”的隐藏 #21

360浏览器下“划词搜索工具条”的隐藏 #21

Comments

abeet commented Feb 13, 2017 • edited Loading