谈谈对A的认识
在web开发中,打交道比较多的除了按钮就是a了, 一般的交互我们基本上都是采用这2种方式进行的,这次就来认识一下a吧。
<a href="http://www.iteye.com" onclick="return openwin()" target="_self">打开javaeye</a>
a中最重要的就是这3个属性定义了:href、target、onclick。一般的跳转href和target都是配合使用的。
1、target有4个值,分别为_self(默认)、_blank、_top、_parent。
_blank是弹出新窗口显示内容,
_top和_parent是在iframe中才起作用,目的是在顶层刷新(_top),或者是在父页面刷新(_parent),注意:如果没有找到也不会报错,效果就和_blank一样了,新窗口显示内容。
其实target也是可以写其他内容的,例如:
<a href="http://www.sohu.com" target="main">搜狐</a>
,那么,它就会去找name为main的iframe,在该iframe显示http://www.sohu.com的内容。如果没有这个main的话,就和_blank一样。
2、href
href是超链接的访问URI,这个不一定非要是http路径,其实浏览器识别href是通过协议进行的,
1) 如果没有任何协议,例如:
<a href="www.sohu.com">搜狐</a>,那么它寻找的就是当前路径下的www.sohu.com这个资源,显然我们的目录下应该不会有该资源,那么对不起,它就只能显示“无法显示网页”,url也变为file:///C:/Documents%20and%20Settings/jiwen.chenjw/Local%20Settings/Temp/www.sohu.com了。
比如我们的应用访问路径是http://localhost/work/sale/index.do,那么该页面定义的<a href="save.do">save</a>访问的就是http://localhost/work/sale/save.do,<a href="../show.do">link</a>,访问的就是http://localhost/work/show.do,<a href="/save.do">save</a>就是从根目录下开始寻找,也就是访问http://localhost/save.do了。
2) 接下来就应该要说说协议了,常用的协议有http、ftp、javascript,其他还有各种各样的自定义协议了。例如:tencent就是腾讯QQ定义的,如果安装过QQ的话,就会响应相对应的程序。
http是我们最常用的一个协议了,大部分时候我们的程序都没有指定这个协议,它就是依据当前应用程序访问的协议。例如:我们的程序访问url为http://localhost/work/index.do,那么页面上<a href="show.do">,我们去访问的时候会变为访问http://localhost/work/show.do,会继承当前页面的协议。
javascript这个协议应该是我们最常用的一个了,在处理链接的时候,大部分都是需要调用其他js函数进行处理,例如:
<a herf="javascript:addUser();">添加用户</a>
<script>
function addUser(){
var form1 = document.getElementById("form1");
form1.action="addUser.do";
form1.target="_blank";
form1.submit();
}
</script>
第二种写法就是
<a href="javascript:window.open('http://www.sohu.com')">添加用户</a>
还有一种写法就是
<a href="javascript:void(0)" onclick="addUser();">添加用户</a>
这里就引入了onclick事件,上面3种方式都可以做到弹出新窗口进行添加用户操作。那么到底有什么区别呢?
(1)使用javascript:window.open()这种方式,在不同浏览器有不同的效果,ie和Firefox都可以弹出新窗口显示www.sohu.com的内容,而当前窗口的内容就显示为[object](IE6)以及[object Window](Firefox)。因为window.open是带有返回值的,而href就是获取返回值显示的。所以直接在href中使用window.open是不推荐的。
我们可以修改为第一种方式。
(2)第三种方式,我们是最常用的,但也会有问题,页面html代码如下:
<script>
function openwin(){
var form1 = document.getElementById("form1");
form1.target="_blank";
form1.submit();
}
</script>
<a href="javascript:void(0)" onclick="openwin()">打开javaeye</a>
<form action="http://www.iteye.com" method="post" id="form1">
</form>
在ie6、firefox中测试没有问题,可以点击多次,而在google chrome浏览器中就只能打开一次,影响用户使用。
第一种方式也同样有这种问题。问题出在哪里呢?
不论是第一种还是第三种,其实都是执行了2次action,一次是openwin中打开新的页面,一次是执行void(0)或者是执行addUser的返回值,而void(0)和addUser的返回值都是为空,所以页面没有变化。这样就可以解释<a href="#" onclick="openwin()">打开javaeye</a>会跳到页面头部去,同时也会执行onclick的事件。
那我们有没有办法只执行一次呢,也就是只执行openwin这个函数,而不去触发href呢,第一种方式显然不行。
我们修改html代码如下:
<script>
function openwin(){
var form1 = document.getElementById("form1");
form1.target="_blank";
form1.submit();
return false;
}
</script>
<a href="http://www.sohu.com" onclick="return openwin()">打开javaeye</a>
<form action="http://www.iteye.com" method="post" id="form1">
</form>
如果onclick="openwin()"那么我们会发现当前页面也同时跳转到搜狐首页去了,当我们修改为onclick="return openwin()",会发现这个页面就不会跳转。
这样就可以知道如果onclick的返回值如果为false,那么就不会触发href。
但上面的代码在chrome中只有第一次点击的时候才有效,原因呢?我们大概可以想到估计是和Ajax的处理原则一样,是不是因为form的action没有发生变化才导致的呢,那我们把代码修改为如下:
<script>
function openwin(){
var form1 = document.getElementById("form1");
form1.action="http://www.iteye.com?date="+new Date().getTime();
form1.target="_blank";
form1.submit();
return false;
}
</script>
<a href="http://www.sohu.com" onclick="return openwin()">打开javaeye</a>
<form action="http://www.iteye.com" method="post" id="form1">
</form>
在chrome中测试成功。
总结一下:
<script>
function openwin(){
var form1 = document.getElementById("form1");
form1.action="http://www.iteye.com?date="+new Date().getTime();
form1.target="_blank";
form1.submit();
return false;
}
</script>
<a href="http://www.sohu.com" onclick="return openwin()">打开javaeye</a>
<form action="http://www.iteye.com" method="post" id="form1">
</form>
页面中的代码处理如上所示,在onclick中获取返回值为false,也可以这样写onclick="openwin();return false;"但不太直观,还是建议如上写法。
解释一下为什么href不设置为javascript:void(0)呢,主要是让用户在关闭Javascript功能的时候点击该链接有响应,使用Javascript的原则就是尽量少用js。
分享到:
相关推荐
NULL 博文链接:https://bazhuang.iteye.com/blog/548381
1.软件配置:office 2003,ifix4.0,step7 v5.4 sp3CN,PlcSim v5.4,S7A V7.20 ...(3)一些测试画面以及其它问题,在后续的讨论中如果大家可以探讨的话会相继贴出来,也希望大家在探讨的过程中可以得到更多的收获。
从审计概念入手,深入探讨审计程序、内部控制及风险评估等内容,最终使学员能熟练应对不同审计挑战,达到精通审计实务的水平。 01 聊聊审计 02 邮件书写 03 货币资金 04 应收账款-A 05 应收账款-B 06 应收账款-C 07 ...
第一次写的资源文章: 我目前是小白,初出茅庐原生写法,相互学习,共同进步! 小弟虚心求教,大神勿喷请多多指点赐教;...有什么其它问题也可评论一起探讨突破,期待你的关注一起进步! 请看下回分解,感谢支持!
计算机局域网网络安全建设的探讨 摘 要 本文就计算机局域网网络安全重要性探讨了有效的安全建设与危险防范策略。对优化计 算机局域网环境,提升网络安全水平,有积极有效的促进作用。 关键词 计算机;局域网;安全...
在前期工作发现景区链接数能够反映景区旅游吸引力的基础上,探讨了北京A级景区的链接动机。首先,根据景区属性建立链接动机的分类体系;然后,通过搜索引擎采集景区链接数据,并随机抽取485个链接样本;最后,由3个...
目前有如下几种解决办法: 1)点击链接后不做任何事情 代码如下: <a>test</a> <a>test</a> <a>test</a> //使用2个到4个#,见的大多是”####”,也有使用”#all”等其他的 2)点击链接后,响应用户自定义的点击事件 ...
目前有如下几种解决办法: 1)点击链接后不做任何事情 代码如下: <a>test</a> <a>test</a> <a>test</a> //使用2个到4个#,见的大多是”####”,也有使用”#all”等其他的 2)点击链接后,响应用户自定义的点击事件 ...
代码如下: <a>text</a> <a>link</a> [removed] var as = document.getElementsByTagName(‘a’); for ( var i = as.length; i–; ) { as[i].onclick = function() { alert(i); return false; } } ...
A Survey on Heterogeneous Graph Embedding: Methods, Techniques, Applications and Sources 异构图 (HG) 也称为异构信息网络,在现实世界中无处不在;因此,HG 嵌入旨在在低维空间中学习表示,同时保留下游任务...
从 A j a x 链接元素的识别、 页面状态标识、 页面状态可控性转换、 页面状态内容动态获取和状态重复检测5 个方面介绍 A j a x 数据采集所取得的最新研究进展, 总结系统的整体处理流程和支撑技术, 探讨新...
本综述探讨了INR在各种医学成像任务中的应用,如图像重建、分割、配准、新视角合成和压缩。它讨论了INR的优点和局限性,强调了其分辨率无关性、内存效率、避免局部偏差和可微分性,使其能够适应不同的任务。此外,...
今天我来分享一下,request....后来去网上百度了一下,看到了一哥门的评 说, request.getHeader(“Referer”)要走HTTP协议才有值,也就是说要通过<a> 标记,才能获取到值。当然通过表单提交的也可以。而通过locatio
A 领取了 0.26元 B 领取了 0.29元 C 领取了 0.02元 D 领取了 0.56元 E 领取了 0.64元 …… 微信是采用什么样的算法做到的?简单百度了下,目前尚未有官方的说明,仅仅在知乎里有一个较为热门的讨论,链接戳这里,不过...
为什么我们不能像原来一样直接用<a></a>标签编写链接哪?vue-router如何使用?常见路由操作有哪些?等等这些问题,就是本篇要探讨的主要问题。 这里的路由并不是指我们平时所说的硬件路由器,这里的路由就是SPA...
另一个好处可能超出你的想象:你建立一个list列表,同时里面添加a链接,用css可以控制定义list列表里面一串元素。 <ul><li><a>收集分享</a></li></ul> 二、路径(面包屑):p段落标签 对 list列表标签 我们可以一起...
个性无忧网址导航v2.2 ... 2、用户可以将短地址设为首页,每次访问自动访问自己的网址主页。 3、按系统分类可添加自己的网址,网址可配丰富图。可以开放站长提交网站logo,以给用户选择。...联系QQ:838689126 欢迎探讨
链接到博客文章: ://techcommunity.microsoft.com/t5/educator-developer-blog/mech-eng-defectors-a-hackathon-story-ai-hack-2021/ba-p/2178670 项目摘要 波士顿住房市场数据集无处不在,但并不完美:存在体积小...
笔者根据多年的实践经验将网页艺术与实际的设计相结合,将计算机网页技术 与艺术融合在一起进行探讨,希望能够对计算机网页设计带来更好的信息效果。 关键词:计算机网页设计 图形设计 处理运用 中图分类号:tp317 ...