JavaScript - 网页跳转 - 收集

我就是我 2022-12-11 12:20 173阅读 0赞

1.应用场景

<table> 
 <tbody> 
 <tr> 
 <td> 主要用于实现页面的跳转, 导航. 实现一些前端需求. </td> 
 </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
 <tr> 
 <td> 1.文档阅读: <a href="https://www.cnblogs.com/lijshui/p/7451360.html" rel="nofollow">https://www.cnblogs.com/lijshui/p/7451360.html</a> <a href="https://www.cnblogs.com/tfphp/p/6126013.html" rel="nofollow">https://www.cnblogs.com/tfphp/p/6126013.html</a> &nbsp; &nbsp; JavaScript 跳转页面与打开新窗口的方法: 1.超链接&lt;a href="http://www.jb51.net" title="脚本之家"&gt;Welcome&lt;/a&gt; 等效于js代码 window.location.href="http://www.jb51.net"; &nbsp; &nbsp; //在同当前窗口中打开窗口 &nbsp; 2.超链接&lt;a href="http://www.jb51.net" title="脚本之家" target="_blank"&gt;Welcome&lt;/a&gt; 等效于js代码 window.open("http://www.jb51.net"); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //在另外新建窗口中打开窗口 //详细介绍 第一种: &nbsp; &lt;script language="JavaScript" type="text/javascript"&gt; &nbsp; &nbsp; window.location.href="http://www.dollare.com.cn/login.PHP?backurl="+window.location.href;&nbsp; &nbsp; &lt;/script&gt; &nbsp; 第二种： &nbsp; &lt;script language="javascript"&gt; &nbsp; &nbsp;&nbsp;alert("返回"); &nbsp; &nbsp;&nbsp;window.history.back(-1); &nbsp; &lt;/script&gt; &nbsp; 第三种: &nbsp; &lt;script language="javascript"&gt; &nbsp; &nbsp; window.navigate("dollare.php"); &nbsp; &lt;/script&gt; &nbsp; 第四种： &nbsp; &nbsp;&lt;script language="JavaScript"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; self.location='dollare.htm'; &nbsp; &nbsp;&lt;/script&gt; &nbsp; 第五种： &nbsp; &nbsp;&lt;script language="javascript"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("非法访问！"); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top.location='dollare.html; &nbsp; &nbsp;&lt;/script&gt; &nbsp; 1.在原来的窗体中直接跳转用 window.location.href="你所要跳转的页面"; 2、在新窗体中打开页面用： window.open('你所要跳转的页面'); window.history.back(-1);返回上一页 3、一些用法 按钮式： &lt;INPUT name="pclog" type="button" value="/Go" onClick="location.href='连接地址'"&gt; 链接式：&lt;a href="javascript:history.go(-1)"&gt;返回上一页&lt;/a&gt; &lt;a href="&lt;%=Request.ServerVariables("HTTP_REFERER")%&gt;"&gt;返回上一页&lt;/a&gt; 直接跳转式： &lt;script&gt;window.location.href='连接地址';&lt;/script&gt; 开新窗口： &lt;a href="/javascript:" onClick="window.open('http://www.dolalre.com.cn','','height=500,width=611,scrollbars=yes,status =yes')"&gt;123&lt;/a&gt; &nbsp; &lt;SCRIPT&gt; &nbsp; &lt;!-- &nbsp; window.open &nbsp; ('dollare.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, &nbsp; resizable=no,location=no, status=no') &nbsp; //写成一行 &nbsp; --&gt; &nbsp; &lt;/SCRIPT&gt;&nbsp; 　　脚本运行后，page.html将在新窗体newwindow中打开，宽为100，高为400，距屏顶0象素，屏左0象素，无工 具条，无菜单条，无滚动条，不可调整大小，无地址栏，无状态栏。请对照。&nbsp; 　　上例中涉及的为常用的几个参数，除此以外还有很多其他参数，请见四。&nbsp; &nbsp; 四、各项参数&nbsp; 　　其中yes/no也可使用1/0；pixel value为具体的数值，单位象素。&nbsp; 参数 | 取值范围 | 说明 &nbsp; alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后 &nbsp; alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上 &nbsp; depended | yes/no | 是否和父窗口同时关闭 &nbsp; directories | yes/no | Nav2和3的目录栏是否可见 &nbsp; height | pixel value | 窗口高度 &nbsp; hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键 &nbsp; innerHeight | pixel value | 窗口中文档的像素高度 &nbsp; innerWidth | pixel value | 窗口中文档的像素宽度 &nbsp; location | yes/no | 位置栏是否可见 &nbsp; menubar | yes/no | 菜单栏是否可见 &nbsp; outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度 &nbsp; outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度 &nbsp; resizable | yes/no | 窗口大小是否可调整 &nbsp; screenX | pixel value | 窗口距屏幕左边界的像素长度 &nbsp; screenY | pixel value | 窗口距屏幕上边界的像素长度 &nbsp; scrollbars | yes/no | 窗口是否可有滚动栏 &nbsp; titlebar | yes/no | 窗口题目栏是否可见 &nbsp; toolbar | yes/no | 窗口工具栏是否可见 &nbsp; Width | pixel value | 窗口的像素宽度 &nbsp; z-look | yes/no | 窗口被激活后是否浮在其它窗口之上&nbsp; =====================================================&nbsp; 【1、最基本的弹出窗口代码】 &nbsp; 其实代码非常简单： &nbsp; &lt;SCRIPT LANGUAGE="javascript"&gt; &nbsp; &lt;!-- &nbsp; window.open ('dollare.html') &nbsp; --&gt; &nbsp; &lt;/SCRIPT&gt;&nbsp; 　　因为着是一段javascripts代码，所以它们应该放在&lt;SCRIPT LANGUAGE="javascript"&gt;标签和&lt;/script&gt;之间&nbsp; 。&lt;!-- 和 --&gt;是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养&nbsp; 成这个好习惯啊。 &nbsp; 　　Window.open ('dollare.html') 用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，&nbsp; 前面应写明路径，绝对路径(http://www.dollare.com.cn/dollare.html)和相对路径(../)均可。用单引号和双引号都可以，只是不要混用。 &nbsp; 　　这一段代码可以加入HTML的任意位置，&lt;head&gt;和&lt;/head&gt;之间可以，&lt;body&gt;间&lt;/body&gt;也可以，越前越早执行&nbsp; ，尤其是页面代码长，又想使页面早点弹出就尽量往前放。 &nbsp; 【2、经过设置后的弹出窗口】 &nbsp; 　　下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。 &nbsp; 　　我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。 &nbsp; &lt;SCRIPT LANGUAGE="javascript"&gt; &nbsp; &lt;!-- &nbsp; window.open ('dollare.html', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, &nbsp; menubar=no, scrollbars=no, resizable=no,location=no, status=no') &nbsp; //写成一行 &nbsp; --&gt; &nbsp; &lt;/SCRIPT&gt; 参数解释: &lt;SCRIPT LANGUAGE="javascript"&gt; js脚本开始； &nbsp; window.open 弹出新窗口的命令； &nbsp; 'page.html' 弹出窗口的文件名； &nbsp; 'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空'代替； &nbsp; height=100 窗口高度； &nbsp; width=400 窗口宽度； &nbsp; top=0 窗口距离屏幕上方的象素值； &nbsp; left=0 窗口距离屏幕左侧的象素值； &nbsp; width=250,toolbar=no,scrollbars="+scroll+",menubar=no"); &nbsp; //写成一行 &nbsp; OpenWindow.document.write("&lt;TITLE&gt;dollare雄仔工作室&lt;/TITLE&gt;") &nbsp; OpenWindow.document.write("&lt;BODY BGCOLOR=#ffffff&gt;") &nbsp; OpenWindow.document.write("&lt;h1&gt;Hello!&lt;/h1&gt;") &nbsp; OpenWindow.document.write("New window opened!&lt;br&gt; is Good") &nbsp; OpenWindow.document.write("&lt;/BODY&gt;") &nbsp; OpenWindow.document.write("&lt;/HTML&gt;") &nbsp; OpenWindow.document.close()} &nbsp; &lt;/SCRIPT&gt; &nbsp; &lt;/head&gt; &nbsp; &lt;body&gt; &nbsp; &lt;a href="#" οnclick="openwin()"&gt;打开一个窗口&lt;/a&gt; &nbsp; &lt;input type="button" οnclick="openwin()" value="打开窗口"&gt; &nbsp; &lt;/body&gt; &nbsp; &lt;/html&gt; &nbsp; 2. 整理后输出 TBD &nbsp; &nbsp; 后续补充 ... </td> 
 </tr> 
 <tr> 
 <td>天下文章一大抄, 你抄我抄大家抄.</td> 
 </tr> 
 </tbody> 
</table>

3.问题/补充

4.参考

<table> 
 <tbody> 
 <tr> 
 <td> <a href="https://www.cnblogs.com/lijshui/p/7451360.html" rel="nofollow">https://www.cnblogs.com/lijshui/p/7451360.html</a> <a href="https://www.cnblogs.com/tfphp/p/6126013.html" rel="nofollow">https://www.cnblogs.com/tfphp/p/6126013.html</a> </td> 
 </tr> 
 </tbody> 
</table>

后续补充

...