用javascript 控制跳转页面

最新推荐文章于 2019-05-07 16:03:00 发布

转载最新推荐文章于 2019-05-07 16:03:00 发布 · 247 阅读

文章标签：

#javascript #button #action #qq #c

本文介绍了如何使用JavaScript实现网页内的直接跳转与新窗口打开功能，并提供了具体的HTML和JavaScript代码示例，包括利用<select>元素进行选择后的跳转和新窗口打开。

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

当面跳转的核心代码是:"location.href=value"

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

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

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

a1(当页,直接跳转):

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>