[汇总]html中a标签中的onclick和href的使用

本文详细介绍了HTML超链接的各种高级用法,包括如何利用不同的参数实现文件下载、新窗口打开、显示说明文字等效果,同时也探讨了如何通过设置链接的onclick事件来控制链接的行为。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

onclick
链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接); 
假设链接中同时存在 href 与 onclick,如果想让 href 属性下的动作不执行,onclick 必须得到一个 false 的返回值。不信,你可以将 goGoogle 函数中的 return false 注释掉; 
如果页面过长有滚动条,且希望通过链接的 onclick 事件执行操作。应将它的 href 属性设为 javascript:void(0);,而不要是 #,这可以防止不必要的页面跳动; 
如果在链接的 href 属性中调用一个有返回值的函数,当前页面的内容将被此函数的返回值代替; 
在按住Shift键的情况下会有所区别。 
今天我遇到的问题,在IE6.0里以href的形式访问不到parentNode。 
尽量不要用javascript:协议做为A的href属性,这样不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放 

下面是自己遇到的: 

如果不设置 href属性在IE6下面会不响应hover。双击后会选中标签的父容器而非这个一a标签(IE下都存在这一问题)。 
<a href="javascirpt:fn(this)"> <a onclick="fn(this)"> 假定我们有个fn方法,需要取到这个元素,第一个方法传入的this是空值。 

所以,比较推荐的写法是<a href="javascript:void(0)" onclick="fn(this)"> 


下面代码则执行了subgo()函数, 

<a href="javascript:void(0)" onclick="subgo()">点我</a> 

在这里,javascript:void(0),没启实质上的作用,它仅仅是一个死链接,执行的函数是subgo()。 

<a href="http://blog.163.com/wb_zhaoyuwei/blog/#" onclick="subgo()">点我</a>与<a href="javascript:void(0)" onclick="subgo()">点我</a>区别。 

实际上 #包含了一个位置信息默认的锚是#top 也就是网页的上端 ,而javascript:void(0) 仅仅表示一个死链接,没有任何信息。所以调用脚本的时候最好用void(0) 

    href一般是指向一个URL地址,也可以调用javascript ,如href="javascript:xxx();",文档中推荐这样写:<a href="http://blog.163.com/wb_zhaoyuwei/blog/ javascript:void(0)" onclick="xxx();">xx</a>,但是这种方法在复杂环境有时会产生奇怪的问题,尽量不要用javascript:协议做为A的href属性,这样不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。 

    我们知道链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接),如果不想执行href 属性下的动作执行,onclick 需要要返回 false ,一般是这样写onclick="xxx();return false;". 

TabPane的JS源码,由于onclick没有返回FALSE,当IFRMAE中关闭TABPANE时会导致href执行,页面显示有问题。解决办法就是将下面代码复制到使用TAB的JSP中。 

------------------------------------------------------------------------------------------------------------------------------------------ 



至于其他楼说的【IE8中,如:"javascript:;","javascript:void(0)","javascript:void(null)"都被拒绝】因为没有安装IE8,不敢妄下结论。 



------------------------------------------------------------------------------------------------------------------------------------------ 



如果在实际应用中确实是要用到<a>标签来响应onclick事件的。 
那么就建议使用下面三种方法 
1.<a href="javascript:void(0)" onclick="doSomething()">test</a> 
2.<a href="http://blog.163.com/wb_zhaoyuwei/blog/" onclick="doSomething();return false">test</a> 
3.<a href="http://blog.163.com/wb_zhaoyuwei/blog/" onclick="doSomething();event.returnValue=false">test</a> 

-------------------------------------------------------------------------------------------------- 

超级链接<a>标记代表一个链接点,是英文anchor(锚点)的简写。它的作用是把当前位置的文本或图片连接到其他的页面、文本或图像,这已是众所周知了,但关于它的语法结构可能有点鲜为人知,而要用活它则必须了解其语法结构。<a>标记的基本语法结构是: 

<a 
class=type 
id=value 
href=reference 
name=value 
rel=same|next|parent|previous 
rev=value 
target=window 
style=value 
title=title 
onclick=function 
onmouseout=function 
onMouseOver=function>连接</a> 
  从标记的语法结构可以看出,在设定一个超级链接时有很多参数可供选择,以实现不同的链接效果,这有点出乎意料吧?! 

  其中class和id选项:用于设定链接点所属的类型和分配的ID号,通常不加以设定。最常用的两个参数是href和name。其中href是hypertext reference的缩略词,用于设定链接地址。链接地址必须为url地址,如果没有给出具体路径,则默认路径和当前页的路径相同。 链接到的文件也分为几种情况:如果为HTML文件,则在当前浏览器中直接打开;如果为可执行文件(.exe文件),则直接执行或下载,我们提供下载的文件就是用它的这种特性做的;如果为文本文件如word格式的文件,则在浏览器中打开此文件,并可以进行编辑加工。 

  rel:表示设定链接的关系:rel=same表示待链接的文件与此文件相同,rel=next表示待链接的文件为下一页,rel=parent表示本文件为待链接文件的父文件,rel=previous则表示待链接的文件为上一页。 

  rev:则用于设定反向链接。 

  target:是在采用帧窗口的情况下设定链接到哪一个窗口,还有target="_bank"是表示新开一窗口打开网页。 

  title:用于设定链接点被选到时显示的标题。 

  onclick:对应于一个事件,当链接点被点击后将触发这个事件,执行对应的子程序。 

  onmouseover:与onclick类似,对应的事件在鼠标移到链接点上时被触发。 

  onmouseout:对应的事件在鼠标移出镇接点后被触发。 

  举几个例子: 

<a href="http://blog.163.com/wb_zhaoyuwei/blog/index.htm">回到主页</a> 
<a href="http://blog.163.com/wb_zhaoyuwei/blog/sound.wav">播放语音文件</a> 
<a href="http://blog.163.com/wb_zhaoyuwei/blog/javascipt.open()">执行对应的程序</a> 
<a herf="document.doc">打开对应的文档进行加工</a> 
  应用技巧 

  1、提供下载文件 

  有不少网友来信问,提供下载的效果怎么做。实际上仍然是做一个超级链接,不过供下载的文件必须上传到网站上。例:有一个“网页技巧”的文件包供下载,文件名是“homepagejq.zip”且已上传到网站了,则这个链接的代码可以这样写:<a href="http://blog.163.com/wb_zhaoyuwei/blog/homepagejq.zip">点击这里下载“网页技巧”文件包</a>。 

  2、在新窗口中打开链接的网页 

  设定“target”的值为“_blank”。例:新开窗口打开网页“aboutme.htm”。产生该效果的代码是:<a href="http://blog.163.com/wb_zhaoyuwei/blog/aboutme.htm" target="_blank">关于我......</a>。 

  3、鼠标移到链接,显示一行说明文字 

  设定“title”参数值,即可获得这种效果。例:当鼠标移到“黄山村夫”这个链接上时,显示说明“这是一个介绍网页制作技巧的专业网站”。这个链接的代码是这样的:<a href="http://blog.163.com/wb_zhaoyuwei/blog/hscf.htm" title="这是一个介绍网页制作技巧的专业网站">黄山村夫</a>。 

  4、鼠标移到一个链接上弹出一个窗口 

  这是设定onmouseover参数获得的效果。例:当鼠标移到一个链接上,弹出一个窗口并在窗口中显示“鼠标悬停效果演示!”。这个链接的代码是这样的:<a href="http://blog.163.com/wb_zhaoyuwei/blog/其它网页.htm" onmouseover="alert('鼠标悬停效果演示!')">链接</a>。用类似的方法可以制作当鼠标按下后弹出提出示窗口、当鼠标离开时弹出提示窗口的效果。 

  5、链接到本页的指定内容 

  要实现链接到本页的某一部分内容上(也就是“文件内跳转”),必须用参数name指定链接点的名称。选定一块文本,可以用name参数为其命名,以备 链接所用。所谓同一个文件内的跳转是指当读者在阅读一个很长的文件的时候,若只对某部分的内容感兴趣,可以采用跳跃式的阅读方式。其基本格式是: 

<a href="#链接点名称">第二部分</a>第一部分内容...... 
........................................... 
<a name="链接点名称"></a>第二部分实际内容...... 
........................................... 
  这样当你点击“第二部分”这个超级链接后,就会自动转移到“第二部分实际内容”这个地方来。“name”参数所定义的链接点名称可以随意取,但链接的“href”参数中的链接点名称必须与其一致,不要忘记在前面加上“#”。 

  6、链接到其它页面的指定内容位置 

  方法与上例类似,但在“href”参数中的链接点名称前要加上网页的文件名。例:有两个网页page1.htm和page2.htm ,每页均有两部分内容,现要在page1.htm中制作一个超级链接,按下该链接后将转到page2.htm的第二部分内容上。那么我们可以这样做,首先在page2.htm第二部分内容开始的地方写上这样一句代码:<a name="链接点名称"></a>;在page1.htm中写上这样一个链接代码:<a href="http://blog.163.com/wb_zhaoyuwei/blog/pagw2.htm#链接点名称">page2 的第二部分内容</a>。 

  7、链接到E_mail 

  点击一个超级链接后,将启动客户机上的电子邮件管理软件给你写信。例这行代码:<a href="mailto:web@webjx.com">请给我写信</a>。一旦你点击了“请给我写信”这个链接,将自动启动电子邮件管理软件(如OE)的写信功能,并已把邮件地址加在了收信人的地址栏里了。 

  链接不仅可以以文本作载体,也可以以图象作载体,而且可以以图片的某一部分作载体,且都能实现上述这些效果,方法也相同,所不同只是载体,也就是链接的两对方括号中间的那部分,所以不再另举例了。
<think>我们正在讨论的是在JSP页面中通过点击超链接(a标签)实现文件预览功能。根据用户提供的引用,我们可以总结出几种实现文件预览的方法,并针对不同类型的文件(如PDF、Word、Excel、PPT等)给出解决方案。 ### 解决方案概述 1. **PDF文件预览**:可以使用开源组件(如FlexPaper)将PDF转换为SWF格式,然后通过Flash播放器预览;或者直接使用浏览器的PDF预览功能(需要浏览器支持)。 2. **Office文件预览**:利用微软的在线预览服务,通过iframe嵌入在线预览链接。 3. **通用文件预览**:对于图片等可以直接在浏览器中预览的文件,可以直接使用a标签链接到文件路径,但要注意添加参数避免直接下载(如引用[2]中提到,对于图片,如果不加特定参数,浏览器会直接预览而不是下载)。 ### 具体实现步骤 #### 1. PDF文件预览 **方法一:使用FlexPaper(需要转换PDF为SWF)** 步骤: 1. 在服务器端将PDF文件转换为SWF格式(可以使用工具如pdf2swf)。 2. 在JSP页面中引入FlexPaper的JSCSS文件。 3. 使用FlexPaper的Viewer来显示转换后的SWF文件。 示例代码: ```jsp <!-- 引入FlexPaper资源 --> <link rel="stylesheet" type="text/css" href="flexpaper/flexpaper.css" /> <script type="text/javascript" src="flexpaper/flexpaper.js"></script> <script type="text/javascript" src="flexpaper/flexpaper_handlers.js"></script> <div id="documentViewer" class="flexpaper_viewer" style="width:100%;height:500px"></div> <script type="text/javascript"> $('#documentViewer').FlexPaperViewer({ config: { SWFFile: 'path/to/converted/file.swf', // 转换后的SWF文件路径 Scale: 0.6, ZoomTransition: 'easeOut', ZoomTime: 0.5, ZoomInterval: 0.2, FitPageOnLoad: true, FitWidthOnLoad: false, FullScreenAsMaxWindow: false, ProgressiveLoading: false, MinZoomSize: 0.2, MaxZoomSize: 5, SearchMatchAll: false, InitViewMode: 'Portrait', RenderingOrder: 'flash,html', StartAtPage: '', ViewModeToolsVisible: true, ZoomToolsVisible: true, NavToolsVisible: true, CursorToolsVisible: true, SearchToolsVisible: true, WMode: 'window', localeChain: 'en_US' } }); </script> ``` **方法二:直接使用浏览器PDF预览(推荐)** 如果用户浏览器支持PDF预览(如Chrome),可以直接通过链接打开PDF文件。但要注意,如果PDF文件较大,加载可能会慢。 示例代码: ```jsp <a href="path/to/file.pdf" target="_blank">预览PDF</a> ``` 或者使用iframe嵌入: ```jsp <iframe src="path/to/file.pdf" width="100%" height="600px"></iframe> ``` 注意:如果PDF文件路径包含中文,需要确保Tomcat的URI编码设置为UTF-8(引用[4])。在Tomcat的`conf/server.xml`中,修改Connector配置: ```xml <Connector ... URIEncoding="UTF-8" /> ``` #### 2. Office文件预览(Word, Excel, PPT) 使用微软提供的在线预览服务(引用[3]): ```jsp <% // 假设文件存储在服务器上,并且可以通过公共URL访问 String fileUrl = "http://yourdomain.com/path/to/file.docx"; // 注意:必须是公共可访问的URL %> <iframe src='https://view.officeapps.live.com/op/view.aspx?src=<%=fileUrl%>' width='100%' height='600px' frameborder='1'></iframe> ``` #### 3. 图片预览 图片预览可以直接使用a标签链接到图片,但默认情况下,点击链接会在当前页面打开图片(即预览)。如果希望在新标签页打开,可以设置`target="_blank"`。 ```jsp <a href="images/example.jpg" target="_blank">预览图片</a> ``` 但是,根据引用[2],如果希望强制下载而不是预览,可以在图片链接后添加参数`?response-content-type=application/octet-stream`。反之,如果我们希望确保是预览,则不要添加此参数。 ### 通用方法:通过JavaScript实现预览(以图片为例) 我们可以通过JavaScript创建一个新窗口或者弹窗来预览文件。 ```jsp <a href="#" onclick="previewFile('path/to/file.jpg')">预览图片</a> <script> function previewFile(url) { // 打开一个新窗口显示文件 window.open(url, '_blank'); } </script> ``` ### 注意事项 1. **文件路径问题**:确保文件路径正确,且服务器有访问权限。 2. **中文路径问题**:如果路径包含中文,需要确保服务器URI编码设置为UTF-8(如Tomcat配置)。 3. **跨域问题**:如果使用微软的Office在线预览,文件必须是通过公网可访问的URL。如果文件在本地服务器,需要确保该服务器可通过公网访问,或者使用内网穿透工具。 4. **安全性**:不要直接使用用户提供的文件路径,防止路径遍历攻击。 ### 总结 在JSP中通过a标签实现文件预览,主要根据文件类型选择不同的预览方式: - PDF:直接链接到PDF文件,利用浏览器内置预览功能,或使用FlexPaper(需转换)。 - Office文件:使用微软在线预览服务(需公网可访问)。 - 图片:直接链接到图片文件。 示例代码汇总: ```jsp <!-- PDF预览 --> <a href="path/to/file.pdf" target="_blank">预览PDF</a> <!-- Word预览 --> <% String wordUrl = "http://yourdomain.com/path/to/document.docx"; %> <a href="#" onclick="window.open('https://view.officeapps.live.com/op/view.aspx?src=<%=wordUrl%>', '_blank')">预览Word文档</a> <!-- 图片预览 --> <a href="path/to/image.jpg" target="_blank">预览图片</a> ``` ### 相关问题 1. 如何在JSP中实现文件上传并实时预览? 2. 如何解决文件预览时的跨域问题? 3. 除了微软的在线服务,还有哪些Office文件预览方案?</think>### JSP中通过a标签实现文件预览的解决方案 在JSP页面中通过a标签实现文件预览功能,需要根据文件类型采用不同的技术方案。以下是针对不同文件类型的实现方法: #### 📄 1. PDF文件预览 **方案一:浏览器直接预览(推荐)** ```jsp <a href="javascript:void(0)" onclick="window.open('${pageContext.request.contextPath}/files/document.pdf', '_blank', 'width=1000,height=700')"> 预览PDF </a> ``` **方案二:使用FlexPaper组件** ```jsp <!-- 引入FlexPaper资源 --> <script type="text/javascript" src="flexpaper/js/flexpaper.js"></script> <script type="text/javascript" src="flexpaper/js/flexpaper_handlers.js"></script> <a href="javascript:void(0)" onclick="$('#documentViewer').FlexPaperViewer({ config : { SwfFile : '${pageContext.request.contextPath}/converted/document.swf', Scale : 0.6 }})"> 预览PDF(FlexPaper) </a> <div id="documentViewer" style="width:100%;height:600px"></div> ``` *注:需要先用pdf2swf工具将PDF转换为SWF格式[^1]* #### 📊 2. Office文件预览(Word/Excel/PPT) ```jsp <% String fileUrl = "http://your-domain.com/files/document.docx"; // 必须是公共可访问URL %> <a href="javascript:void(0)" onclick="document.getElementById('officeFrame').src='https://view.officeapps.live.com/op/view.aspx?src=<%=fileUrl%>'"> 预览Office文档 </a> <iframe id="officeFrame" width="100%" height="600px" frameborder="0" style="display:none"></iframe> ``` *使用微软官方预览服务[^3]* #### 🖼️ 3. 图片预览 ```jsp <a href="javascript:void(0)" onclick="document.getElementById('previewImage').src='images/photo.jpg'; document.getElementById('imagePreview').style.display='block'"> 预览图片 </a> <div id="imagePreview" style="display:none"> <img id="previewImage" src="" width="100%"> </div> ``` #### 📑 4. 通用预览方案(弹出窗口) ```jsp <script> function previewFile(filePath) { var screenWidth = screen.availWidth; var screenHeight = screen.availHeight; var winOption = "left=0,top=0,width=" + screenWidth + ",height=" + screenHeight + ",toolbar=yes,menubar=yes,location=yes,status=yes,scrollbars=yes,resizable=yes"; window.open(filePath, '_blank', winOption); } </script> <a href="javascript:void(0)" onclick="previewFile('${pageContext.request.contextPath}/files/document.pdf')"> 通用预览 </a> ``` *适用于多种文件类型[^5]* --- ### ⚠️ 关键注意事项 1. **中文路径问题**:确保Tomcat配置了URI编码 ```xml <!-- conf/server.xml --> <Connector URIEncoding="UTF-8" ... /> ``` 否则中文路径文件可能无法预览[^4] 2. **安全控制**: ```jsp <% // 验证用户权限 if(user.hasPermission("file_view")) { %> <a href="preview.jsp?file=sensitive.doc">预览</a> <% } %> ``` 3. **移动端适配**: ```jsp <script> function mobilePreview(url) { if(/Android|webOS|iPhone|iPad/i.test(navigator.userAgent)) { window.open(url, '_blank', 'location=yes'); } else { // 桌面端预览逻辑 } } </script> ``` 4. **避免下载**:对于图片文件,不要添加`?response-content-type=application/octet-stream`参数,否则会触发下载而非预览[^2] --- ### 🌐 最佳实践推荐 1. **文件类型检测**: ```jsp <script> function previewByType(url) { var ext = url.split('.').pop().toLowerCase(); if(['jpg','jpeg','png','gif'].includes(ext)) { // 图片预览 } else if(ext === 'pdf') { // PDF预览 } else if(['doc','docx','xls','xlsx','ppt','pptx'].includes(ext)) { // Office预览 } else { // 通用预览 } } </script> ``` 2. **服务器端配置**:确保web.xml添加MIME类型支持 ```xml <mime-mapping> <extension>pdf</extension> <mime-type>application/pdf</mime-type> </mime-mapping> ``` 3. **性能优化**:大文件使用分页加载 ```jsp <!-- PDF.js示例 --> <iframe src="/web/viewer.html?file=/files/large.pdf" width="100%" height="600px"></iframe> ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值