当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

用javascript 控制跳转页面

发表于: 2009-07-12   作者:120153216   来源:转载   浏览:
摘要: 当面跳转的核心代码是:"location.href=value" 新页面打开的核心代码是:"window.open()" 而还需注意的就是javasrcipt代码的嵌入位置:(1)直接跳转或打开的javascript 代码是嵌入在<select>中的,(2)提交后跳转或新页面打开是嵌入到提交按钮中的,并且按钮不是用"subm
当面跳转的核心代码是:"location.href=value"

新页面打开的核心代码是:"window.open()"

而还需注意的就是javasrcipt代码的嵌入位置:(1)直接跳转或打开的javascript 代码是嵌入在<select>中的,(2)提交后跳转或新页面打开是嵌入到提交按钮中的,并且按钮不是用"submit",而是用"button",调用javascript 是用"onclick",而没有在<form>中用"onsubmit"

下面分别是四种情况的代码:

a1(当页,直接跳转):



<select name="qq" onchange="javascript:location.href=this.value;">
<option value="http://www.zol.com.cn" selected="selected" >zol</option>
<option value="http://www.163.com" >163</option>
<option value="http://www.sina.com" >sina</option>
<option value="http://www.sohu.com" >sohu</option>
</select>

b1(新页面,直接打开):
<select name="" onchange="javascript:window.open(this.options[this.selectedIndex].value)">
<option value="http://www.zol.com.cn" selected="selected" >zol</option>
<option value="http://www.163.com" >163</option>
<option value="http://www.sina.com" >sina</option>
<option value="http://www.sohu.com" >sohu</option>
</select>

可以看到,直接跳转或直接打开,javascript 的代码都不需要查找标签"select"的位置,不需引用form 或 select 的名字,只是通过"this"进行当前的指定.下次像这样形式的"select",CTRL+C CRTL+V 就可以用了.

a2(当页,提交后跳转)
<form name="frm2" action="">
<select name="page2">
<option value="./date.html" selected="selected" >zol</option>
<option value="http://www.163.com" >163</option>
<option value="http://www.sina.com" >sina</option>
<option value="http://www.sohu.com" >sohu</option>
</select>
<input type="button" value="提交" onclick="javascript:location.href=document.frm2.page2.options[document.frm2.page2.selectedIndex].value;"/>
</form>


b2(新页面,提交后打开)
<form name="frm" action="">
<select name="page">
<option value="./date.html" selected="selected" >zol</option>
<option value="http://www.163.com" >163</option>
<option value="http://www.sina.com" >sina</option>
<option value="http://www.sohu.com" >sohu</option>
</select>
<input type="button" value="提交" onclick="javascript:window.open(document.frm.page.options[document.frm.page.selectedIndex].value)"/>
</form>

a2,b2跟a1,b1不同之处在于必须对form 和 select 进行命名,因为在javascript代码中需要用到其名字进行指定行为的对象.用到其它地方时,需要对form select 的名字,及代码中进行对应的修改(黄色的字体).

http://www.corange.cn/archives/2008/10/2132.html



本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/piperzero/archive/2009/07/04/4321102.aspx

用javascript 控制跳转页面

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

推荐文章
编辑推荐
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号