要实现这个功能,你可以使用JavaScript来检测用户的访问来源,并根据检测结果来控制某个
div
的显示与隐藏。以下是一个简单的示例代码,它使用了
navigator.userAgent
来检测用户是否通过手机浏览器访问,以及
document.referrer
来检查用户是否通过搜索引擎访问:
<script>
document.addEventListener('DOMContentLoaded', function() {
var divToToggle = document.getElementById('search-engine-div'); // 替换为你的div的ID
// 检查是否是手机浏览器
var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
// 检查是否通过搜索引擎访问
var isSearchEngine = document.referrer && (document.referrer.includes('google') || document.referrer.includes('bing') || document.referrer.includes('baidu'));
// 如果是手机浏览器且是通过搜索引擎访问,则显示div
if (isMobile && isSearchEngine) {
divToToggle.style.display = 'block';
} else {
divToToggle.style.display = 'none';
}
});
</script>
<div id="search-engine-div" style="display:none;">来自搜索引擎</div>
<div id="direct-access-div">直接访问</div>
在这段代码中:
document.getElementById('div-to-toggle')
:你需要将'div-to-toggle'
替换为你想要控制显示与隐藏的div
的ID。
isMobile
:这个变量通过正则表达式检查用户的userAgent
字符串,以确定是否是手机浏览器。
isSearchEngine
:这个变量检查document.referrer
(即前一个页面的URL),看它是否包含特定搜索引擎的域名,以确定用户是否通过搜索引擎访问。
if
语句:根据isMobile
和isSearchEngine
的值来决定是否显示div
。
请注意,这个代码只是一个基本的示例,实际使用时可能需要根据你的具体需求进行调整。例如,userAgent
的检测并不是100%准确,并且搜索引擎的列表可能需要根据实际情况进行扩展。此外,document.referrer
可能在某些情况下(如用户直接输入网址或使用书签访问)为空,因此可能需要更复杂的逻辑来准确判断访问来源。