技法68 (◐‿◑) 打开新页面 | 【新征程】

不二如是 · 发表于 2017-10-28 11:55:02

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2017-10-28 22:19 编辑

登录/注册后可看大图

按照提示，完成代码，秀秀你的编程能力！

不许看答案，否则打屁屁

分析：

在日常的项目中，最常用的效果就是打开新页面。

例如：在鱼C点开你关注的页面就会跳转到那里。

在HTML代码中，通过<a>标签即可实现不同B格的跳转功能，那么Js中是如何实现的呢？

Code：

HTML：

<h2>打开新页面</h2>
    <input id='openNewPage' data-href='http://www.fishc.com/' type="button" value="鱼C官网" />

JS：

<script type="text/javascript">
    window.onload = function(){
        var openNewPage = function(e){
            /*
             在原来的窗口中，直接跳转至目标页面
             window.location.href="将要跳转的页面";

             在新窗口中打开页面
             window.open('将要跳转的页面');
             window.history.back(-1);返回上一页

             通过指定的URL替换当前的页面及缓存内容，导致跳转页面后没有后退功能
             window.location.replace("将要跳转的页面")

             通过文档头META跳转： CONTENT 后面的阿拉伯数字是代表过几秒中钟转入目标网页，URL是目标地址
             <META HTTP-EQUIV="Refresh" CONTENT="0;URL= "将要跳转的页面">
             */
            e.onclick = function(){
                window.location.href = this.getAttribute('data-href');//通过第一条的方式跳转页面
            }
        }
        openNewPage(document.getElementById("openNewPage"))
    };
</script>

请按照自己的理解订正对概念的认知

代码说明（秀智商）：

游客，如果您要查看本帖隐藏内容请回复

回顾：

技法67 (◐‿◑) 使用instanceof验证对象的构造函数

源代码：

index.zip (904 Bytes, 下载次数: 8, 售价: 5 鱼币)

○面试题索引贴●

如果喜欢，请订阅

：

HTML5 - 庖丁解牛 + JavaScript - 庖丁解牛

如果喜欢，别忘了评分

：

登录/注册后可看大图

小甲鱼 · 发表于 2017-10-28 21:28:35

小而美的代码~

sunbocheng · 发表于 2017-10-29 20:22:44

Ruide · 发表于 2018-3-13 09:11:04

Merci.

mhb789456 · 发表于 2018-7-9 10:28:44

看看代码

dsa159245 · 发表于 2018-7-15 03:04:40

6666666666666666

jay6697117 · 发表于 2018-7-26 08:19:12

MSK · 发表于 2018-8-5 20:26:25

我使用jQ

sjh13140 · 发表于 2018-9-6 11:53:13

凌乱大帅比 · 发表于 2018-9-16 15:38:28

呃呃呃呃呃

a211827754 · 发表于 2018-9-20 10:19:34

答案掳走

SKR · 发表于 2018-10-10 22:32:36

是菠萝不是萝卜 · 发表于 2018-11-4 14:34:14

cupbbboom · 发表于 2018-12-14 13:19:49

kanbudong

2506846774 · 发表于 2019-2-10 12:57:08

水中望月 · 发表于 2019-2-11 11:38:38

看看

a641743376 · 发表于 2019-3-8 11:13:40

Pe_ka · 发表于 2019-5-27 10:14:12

kankan

小柒启 · 发表于 2019-7-3 09:23:41

打卡打卡

changzuo · 发表于 2019-9-28 11:35:33

......

账号		自动登录	找回密码
密码			立即注册

[每日一练] 技法68 (◐‿◑) 打开新页面 | 【新征程】

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

点评