<a href="http://www.javaeye.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也是可以写其他内容的,例如:
Html代码
<a href="http://www.sohu.com" target="main">搜狐</a>
<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函数进行处理,例如:
Html代码
<a herf="javascript:addUser();">添加用户</a>
<script>
function addUser(){
var form1 = document.getElementById("form1");
form1.action="addUser.do";
form1.target="_blank";
form1.submit();
}
</script>
<a herf="javascript:addUser();">添加用户</a> <script> function addUser(){ var form1 = document.getElementById("form1"); form1.action="addUser.do"; form1.target="_blank"; form1.submit(); } </script>
第二种写法就是
Html代码
<a href="javascript:window.open('http://www.sohu.com')">添加用户</a>
<a href="javascript:window.open('http://www.sohu.com')">添加用户</a>
还有一种写法就是
Html代码
<a href="javascript:void(0)" onclick="addUser();">添加用户</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代码如下:
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.javaeye.com" method="post" id="form1">
</form>
<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.javaeye.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代码如下:
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.javaeye.com" method="post" id="form1">
</form>
<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.javaeye.com" method="post" id="form1"> </form>
如果onclick="openwin()"那么我们会发现当前页面也同时跳转到搜狐首页去了,当我们修改为onclick="return openwin()",会发现这个页面就不会跳转。
这样就可以知道如果onclick的返回值如果为false,那么就不会触发href。
但上面的代码在chrome中只有第一次点击的时候才有效,原因呢?我们大概可以想到估计是和Ajax的处理原则一样,是不是因为form的action没有发生变化才导致的呢,那我们把代码修改为如下:
Html代码
<script>
function openwin(){
var form1 = document.getElementById("form1");
form1.action="http://www.javaeye.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.javaeye.com" method="post" id="form1">
</form>
<script> function openwin(){ var form1 = document.getElementById("form1"); form1.action="http://www.javaeye.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.javaeye.com" method="post" id="form1"> </form>
在chrome中测试成功。
总结一下:
Html代码
<script>
function openwin(){
var form1 = document.getElementById("form1");
form1.action="http://www.javaeye.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.javaeye.com" method="post" id="form1">
</form>
<script> function openwin(){ var form1 = document.getElementById("form1"); form1.action="http://www.javaeye.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.javaeye.com" method="post" id="form1"> </form>
页面中的代码处理如上所示,在
相关推荐
PHP网站跳转链接页面源码 一般用在跳转到外部链接.
但是如果我们还用这种方法跳到外部链接,就会报错,我们一看链接的路径,原来是我们的外部链接前面加上了http://localhost:8080/#/这一串导致跳转出现问题,那么我们如何跳转到外部链接呢,我们只需用 [removed]....
最近开发项目有这么一个需求 有一堆A链接关键词,点击后让他跳转到百度自动搜索此关键词,js写法如下,希望可以帮到各位
android界面跳转传值和链接跳转android界面跳转传值和链接跳转
a标签跳转打开新页面
非本站链接自动跳转 站外链接跳转 SEO 防止网站权重流失
抖音私信名片链接跳转"或"抖音私信消息卡片链接"或"抖音私信图文链接"是2022年抖音引流营销技术 可以在抖音APP私信环境下生成卡片链接,支持标题、描述、logo以及跳转落地页的完全自定义配置. 强大独立后台方便...
今天小编就为大家分享一篇Laravel重定向,a链接跳转,控制器跳转示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
html点击链接打开app并跳转至指定的界面;因为项目中有登录控制,所以需要在MainActivity中判断是否登录;如果登录状态,那么就直接跳转;如果未登录,则先保存要跳转的界面数据然后到登录界面登录成功回来会自动...
Baidu链接,解压后,可双击,直接跳转至百度网页,适用于电脑、手机。前提是有浏览器的支持。
易优url链接外链跳转插件.zip
最近一个项目需要iOS和安卓使用一个二维码,让扫描的机器自己识别操作系统实现跳转到相应的下载链接。比如iPhone用微信进行扫描就让他跳转appStore的下载页面,安卓机器使用微信扫描就直接跳浏览器下载。但是这...
PHP实现获取当前链接地址的301或者302跳转之后的真实链接地址.zip
swiper移动端左右滑动与a标签链接接同时触发解决方案
通过AS3代码,自动跳转到一个url网页链接,程序员的第一步资源共享!
TP5短链接生成与跳转,短链接生成 地址:http://t.cn/setshorturl.html?sign=xxxxxxxxxxxxxxxxx post参数: urls 原链接地址 必填 title 描述信息 非必填 返回值: { "status": 0, "msg": "短链接生成成功", "data":...
UILabel无法实现获取指定文字的rect,用UItextview代替了,效果和Label一样
js左侧导航栏A标签锚点跳转,流动效果。非常值得学习。
下面小编就为大家分享一篇jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
淘客链接转换工具