为什么要使用href=”javascript:void(0);”

本文解析了href属性中javascript:void(0)与#的区别,重点讲解了它们如何阻止链接跳转并保持样式,以及如何在链接中执行自定义函数。同时提供了使用方法示例和两者在页面行为上的对比。
href=”javascript:void(0);”这个的含义是,让超链接去执行一个js函数,而不是去跳转到一个地址,
而void(0)表示一个空的方法,也就是不执行js函数。

为什么要使用href=”javascript:void(0);”

javascript:是伪协议,表示url的内容通过javascript执行。void(0)表示不作任何操作,这样会防止链接跳转到其他页面。这么做往往是为了保留链接的样式,但不让链接执行实际操作,

<a href="javascript:void(0)" onClick="window.open()"> 点击链接后,页面不动,只打开链接

<a href="#" οnclick="javascript:return false;"> 作用一样,但不同浏览器会有差异。

 

href=”javascript:void(0);”与href=”#"的区别

<a href="javascript:void(0)">点击</a>点击链接后不会回到网页顶部 <a href="#">点击</a> 点击后会回到网面顶部

"#"其实是包含了位置信息,例如默认的锚点是#top 也就是网页的上端

而javascript:void(0) 仅仅表示一个死链接这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首

而javascript:void(0) 则不是如此所以调用脚本的时候最好用void(0)

 

使用javascript的方法

<a href="#" οnclick="javascript:方法;return false;">文字</a>

<a href="javascript:void(0)" οnclick="javascript:方法;return false;">文字</a>

 

补充 <a href="javascript:hanshu();"这样点击a标签就可以执行hanshu()函数了。

### 爬虫处理 `href=javascript:void(0)` 的解决方案 当遇到 `<a>` 标签的 `href` 属性设置为 `javascript:void(0);` 时,传统的爬虫技术通常会失效,因为这些链接并不指向实际的 URL 资源。然而,现代网站往往依赖于 JavaScript 动态加载数据,因此可以通过以下方法解决这一问题。 #### 方法一:模拟浏览器行为 使用支持 JavaScript 执行环境的工具(如 Selenium 或 Puppeteer),可以有效应对动态加载的内容。这类工具有能力运行目标页面上的 JavaScript 代码并捕获最终渲染后的 DOM 结构。 ```python from selenium import webdriver driver = webdriver.Chrome() driver.get('https://example.com') # 查找所有带有 href="javascript:void(0);" 的 a 标签 elements = driver.find_elements_by_xpath("//a[@href='javascript:void(0);']") for element in elements: # 模拟点击事件 driver.execute_script("arguments[0].click();", element) # 获取点击后产生的新内容 content = driver.page_source print(content) ``` 此方法利用 WebDriver API 提供的功能直接触发点击动作,并获取更新后的页面内容[^1]。 #### 方法二:分析网络请求 许多情况下,尽管前端 HTML 中存在 `javascript:void(0);`,但实际上的数据交互是通过 AJAX 请求完成的。借助开发者工具中的 Network 面板可以帮助识别这些后台调用的具体接口地址及其参数结构。 按照如下流程操作: 1. **打开开发者模式**:按下 F12 键或者右键菜单选择“检查”选项; 2. **切换至 Networks 标签页**:准备观察 HTTP 流量情况; 3. **筛选 XHR 类型流量**:专注于异步通信部分; 4. **记录关键请求细节**:复制有用的 URL 和 POST 数据体等信息用于后续仿造请求构建[^3]。 一旦明确了服务器端暴露出来的 RESTful 接口,则可以直接采用 Python 库 requests 实施自动化抓取: ```python import requests url = 'http://api.example.com/data' headers = {'User-Agent': 'Mozilla/5.0'} params = { 'b_id': 'some_value', # 替换为你找到的实际参数值 } response = requests.get(url, headers=headers, params=params) if response.status_code == 200: data = response.json() print(data) else: print(f'Failed to fetch data: {response.status_code}') ``` 注意某些站点为了保护资源安全设置了严格的 CORS 策略或者其他形式的身份验证机制,在尝试复刻原始请求前需仔细研究响应头字段以及 Cookie 存储状况[^4]。 #### 方法三:逆向工程 JavaScript 函数逻辑 如果确认目标功能完全由客户端脚本实现而非远程服务提供支撑的话,那么还可以进一步深入剖析相关联的 .js 文件内容,试图还原内部算法原理进而手动重现期望的结果集。不过这种方式难度较大且容易违反法律条款,请谨慎行事! ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值