精华内容
下载资源
问答
  • 页面跳转方式

    2017-03-28 10:37:58
    web前端开发中,经常使用到页面跳转,下面是使用过的几种常用的跳转方式。 1.html跳转,通过标签, 链接 ,其中target共有4种模式: 1)_self,默认方式,在当前窗口跳转 2)_blank,跳转到新窗口 3)_parent,在...
    web前端开发中,经常使用到页面跳转,下面是使用过的几种常用的跳转方式。 
    

    1.html跳转,通过<a>标签,
    
    <a href="www.xxx.com" target="_self">链接</a>
    

    ,其中target共有4种模式:
    1)_self,默认方式,在当前窗口跳转
    2)_blank,跳转到新窗口
    3)_parent,在当前父窗口跳转
    4)_top,在当前顶级窗口跳转

    2.js跳转,js跳转能控制的属性要比html直接跳转要更多。
    
    window.location.href = "www.xxx.com";
    

    location其实还有N种属性,可以控制页面的位置等信息,但这种方式好像没法跳转到新页面上。
    
    window.open('www.xxx.com', '_self');
    

    第二个参数和html跳转中的target模式一样,也是有4种方式,同时,open函数也带有N种属性。

    3.此外,js中还可以记录页面跳转的历史,通过历史访问顺序来控制:
    window.history.back();
    window.history.go();
    window.history.forward();
    展开全文
  • mui几种页面跳转方式对比

    万次阅读 2016-02-22 10:44:50
     ...【几种打开页面方式】 1.初始化时创建子页面 2.直接打开新页面 3.预加载页面 【示例】 1.初始化时创建子页面 [js] view plain copy print? mui.init({subpages:[{
    

    关注公众号 风色年代(itfantasycc) 500G超好玩儿的前端资料大礼包等你拿

    HTML5+开发移动app教程4-mui中几种open页面的区别_uikoo9的专栏-CSDN博客

    【几种打开页面的方式】

    1.初始化时创建子页面

    2.直接打开新页面

    3.预加载页面

    【示例】

    1.初始化时创建子页面

    1. mui.init({  
    2.     subpages: [{  
    3.         url: your - subpage - url, //子页面HTML地址,支持本地地址和网络地址  
    4.         id: your - subpage - id, //子页面标志  
    5.         styles: {  
    6.             top: subpage - top - position, //子页面顶部位置  
    7.             bottom: subpage - bottom - position, //子页面底部位置  
    8.             width: subpage - width, //子页面宽度,默认为100%  
    9.             height: subpage - height, //子页面高度,默认为100%  
    10.             ......  
    11.         },  
    12.         extras: {} //额外扩展参数  
    13.     }]  
    14. });  
    mui.init({
        subpages: [{
            url: your - subpage - url, //子页面HTML地址,支持本地地址和网络地址
            id: your - subpage - id, //子页面标志
            styles: {
                top: subpage - top - position, //子页面顶部位置
                bottom: subpage - bottom - position, //子页面底部位置
                width: subpage - width, //子页面宽度,默认为100%
                height: subpage - height, //子页面高度,默认为100%
                ......
            },
            extras: {} //额外扩展参数
        }]
    });

    2.直接打开新页面

    1. mui.openWindow({  
    2.     url: new - page - url,  
    3.     id: new - page - id,  
    4.     styles: {  
    5.         top: newpage - top - position, //新页面顶部位置  
    6.         bottom: newage - bottom - position, //新页面底部位置  
    7.         width: newpage - width, //新页面宽度,默认为100%  
    8.         height: newpage - height, //新页面高度,默认为100%  
    9.         ......  
    10.     },  
    11.     extras: {  
    12.         ..... //自定义扩展参数,可以用来处理页面间传值  
    13.     }  
    14.     show: {  
    15.         autoShow: true, //页面loaded事件发生后自动显示,默认为true  
    16.         aniShow: animationType, //页面显示动画,默认为”slide-in-right“;  
    17.         duration: animationTime //页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;  
    18.     },  
    19.     waiting: {  
    20.         autoShow: true, //自动显示等待框,默认为true  
    21.         title: '正在加载...', //等待对话框上显示的提示内容  
    22.         options: {  
    23.             width: waiting - dialog - widht, //等待框背景区域宽度,默认根据内容自动计算合适宽度  
    24.             height: waiting - dialog - height, //等待框背景区域高度,默认根据内容自动计算合适高度  
    25.             ......  
    26.         }  
    27.     }  
    28. })  
    mui.openWindow({
        url: new - page - url,
        id: new - page - id,
        styles: {
            top: newpage - top - position, //新页面顶部位置
            bottom: newage - bottom - position, //新页面底部位置
            width: newpage - width, //新页面宽度,默认为100%
            height: newpage - height, //新页面高度,默认为100%
            ......
        },
        extras: {
            ..... //自定义扩展参数,可以用来处理页面间传值
        }
        show: {
            autoShow: true, //页面loaded事件发生后自动显示,默认为true
            aniShow: animationType, //页面显示动画,默认为”slide-in-right“;
            duration: animationTime //页面动画持续时间,Android平台默认100毫秒,iOS平台默认200毫秒;
        },
        waiting: {
            autoShow: true, //自动显示等待框,默认为true
            title: '正在加载...', //等待对话框上显示的提示内容
            options: {
                width: waiting - dialog - widht, //等待框背景区域宽度,默认根据内容自动计算合适宽度
                height: waiting - dialog - height, //等待框背景区域高度,默认根据内容自动计算合适高度
                ......
            }
        }
    })

    3.预加载页面

    1. // 方式1  
    2. mui.init({  
    3.     preloadPages: [{  
    4.         url: prelaod - page - url,  
    5.         id: preload - page - id,  
    6.         styles: {}, //窗口参数  
    7.         extras: {}, //自定义扩展参数  
    8.         subpages: [{}, {}] //预加载页面的子页面  
    9.     }]  
    10. });  
    11.   
    12. // 方式2  
    13. var page = mui.preload({  
    14.     url: new - page - url,  
    15.     id: new - page - id, //默认使用当前页面的url作为id  
    16.     styles: {}, //窗口参数  
    17.     extras: {} //自定义扩展参数  
    18. });  
    // 方式1
    mui.init({
        preloadPages: [{
            url: prelaod - page - url,
            id: preload - page - id,
            styles: {}, //窗口参数
            extras: {}, //自定义扩展参数
            subpages: [{}, {}] //预加载页面的子页面
        }]
    });
    
    // 方式2
    var page = mui.preload({
        url: new - page - url,
        id: new - page - id, //默认使用当前页面的url作为id
        styles: {}, //窗口参数
        extras: {} //自定义扩展参数
    });

    【一些区别】

    1.子页面和非子页面

    以上三种方式中,2,3打开的页面非子页面,

    区别是子页面相当于html中的iframe,而非子页面相当于新开了一个浏览器窗口加载了一个html

    2.子页面适用于侧滑菜单

    子页面有其有点,特别适用与index.html+list.html这种情况,

    如果用index.html(主页面)+list.html(子页面)实现的话,当主页面右滑时子页面会自动跟随,

    而用index.html(主页面)+list.html(新页面)实现的话,主页面右滑,新页面不右滑,还得单独处理新页面。

    3.子页面实用频繁切换的情况

    如果频繁左滑右滑,在配置较低的手机上会出现list.html遮住index.html的情况,

    采用子页面模式就不会,采用新页面模式几率很大。

    4.子页面适用与下拉刷新和上拉加载

    之前做大下拉刷新的时候,采用的是新页面的形式,

    按照官网教程,怎么搞都不成功,

    后来看了下源码,发现下拉刷新必须采用子页面的形式,

    也就是你的list.html必须是index.html的子页面,才可以下拉刷新。

    5.新页面适用于新页面

    open一个新页面,适用于查看详情之类的,需要打开一个新页面的情况,

    并且mui自己封装了新页面的back方法,你就不需要去操心了。

    6.预加载页面的两种方式

    第一种是在初始化的时候预加载,

    这种情况适合在你这个页面在很久之后才会用,

    如果你要立即到的页面并使用,那么你会得到null。

    第二种方式类似与open,

    个人感觉没有什么太大的区别,

    唯一的区别是open就直接打开了,

    preload只是加载,你可以之后选择打开的时机。

    7.总结

    需要下拉刷新上拉加载请使用子页面,

    需要打开一个新页面请使用新页面方式,

    需要加载一个页面但是暂时不使用请使用预加载方式。

    展开全文
  • MUI移动端页面跳转方式

    千次阅读 2017-04-07 11:15:44
    MUI移动端页面跳转方式

    MUI移动端页面跳转

    MUi移动端跳转有三种常用方式:

    跳转方法一:button类型使用οnclick='',函数跳转

    示例代码:

    function jumpToDetailView(){
    mui.openWindow({
    url:'gcx.html',
    id:'gcx.html'
    });
    }
    这种方法貌似只对button有效。

    跳转方法二:添加监听事件跳转

    示例代码:

    document.getElementById('gcx').addEventListener('tap',function(){
    mui.openWindow({
    url:'gcx.html',
    id:'gcx.html'
    });
    });
    添加监听事件对所有跳转都有效。


    跳转方法三:使用.on形式跳转

    基于官网(http://dev.dcloud.net.cn/mui/event/#on)上的描述“除了可以使用   addEventListener()  方法监听某个特定元素上的事件外, 也可以使用 .on()方法实现批量元素的事件绑定”。这里要特别注意:

    mui的绑定仅支持事件委托,不支持当前元素绑定,当前元素绑定请直接使用  addEventListener,  removeEventListener,可以看 MUI的源码,直接绑定是不支持的。

    比如:    

    mui('body').on('tap','a',function(){})
    这样就绑定了所有的A标签元素了。单独绑定一个的话,建议直接用  addEventListener

    示例:

    点击新闻列表,获取当前列表项的id,并将该id传给新闻详情页面,然后打开新闻详情页面:

    mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){
    //获取id
    var id = this.getAttribute("id");
    //传值给详情页面,通知加载新数据
    mui.fire(detail,'getDetail',{id:id});
    //打开新闻详情
    mui.openWindow({
    id:'detail',
    url:'detail.html'
    });
    }) 

    展开全文
  • 本篇文章主要介绍了springMVC 几种页面跳转方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • html页面跳转方式 + 跳转传参

    千次阅读 2018-12-26 14:46:27
    一,页面跳转方式(在原有的页面) 1.利用a标签 &lt;a href="mattertext-list.html"&gt;图文素材&lt;/a&gt; 2.jq跳转 function add_richtext(item) {  window.location.href='...

    一,页面跳转方式(在原有的页面)

    1.利用a标签

    <a href="mattertext-list.html">图文素材</a>

    2.jq跳转

    function add_richtext(item) {
         window.location.href='wenben-list.html';
      }

    二 ,页面跳转传参(打开新的页面)

    //A页面写法
    url = "../Boke/bokedetail-list.html?bokeinfo=" + id;//此处拼接内容
    window.open(url)
    //B页面写法
    var url = decodeURI(window.location.href);
    var argsIndex = url.split("?bokeinfo=");
    var bokeinfo = argsIndex[1]
    
    

    该方法会打开新的页面,并且传参

    展开全文
  • 主要介绍了mui几种页面跳转方式对比,创建子页面,打开新页面,预加载页面三种方式做出了对比,需要的朋友可以参考下
  • jquery 设置页面跳转方式 1.打开新窗口跳转 window.open("跳转地址") // 跳转打开一个新的窗口 2.当前页面跳转 window.location.href("跳转地址") // 当前页面跳转 ...
  • 微信小程序页面跳转方式的总结

    千次阅读 2018-10-10 17:03:52
    微信小程序页面跳转方式的总结微信小程序页面跳转方式的总结前言wx.navigateTowx.redirectTowx.navigateBack 微信小程序页面跳转方式的总结 前言 在微信小程序的开发中经常会遇到页面跳转的情况,有的在跳转的时候还...
  • SpringMVC 几种页面跳转方式

    万次阅读 2018-03-30 16:07:53
    SpringMVC 几种页面跳转方式总结如下:1.不使用ModelAndView1)、通过HttpServletResponse的API直接输出(不需要配置渲染器)@Controllerpublic class RequestController{ @RequestMapping("/resp") ...
  • react native中页面跳转方式1、 this.props.navigation.navigate(&amp;quot;RouteName&amp;quot;)2、this.props.navigation.push(&amp;quot;RouteName&amp;quot;)3、this.props.navigation.goBack()...
  • Vue页面跳转方式及传参总结

    千次阅读 2020-11-19 16:41:12
    Vue页面跳转方式及传参总结 路由配置 //路由配置 routerindex.js页面 import Vue from 'vue' import Router from 'vue-router' import UserManager from '@/components/UserManager' Vue.use(Router) export ...
  • jsp中的页面跳转方式

    2018-10-16 17:07:39
    在一些html的文档中,用herf实现页面跳转的比较常见,也很好用。 jsp一般不用 方法二:getRequestDispatcher请求转发 request.getRequestDispatcher(url).forward(request,response); 这种方法比较实用,...
  • jquery mobile的两种页面跳转方式

    万次阅读 2017-08-10 14:42:00
    jquery mobile的两种页面跳转方式 所有html都放在一个index.html中 多个html页面相互切换 jqm页面切换机制mechanism
  • C#中页面跳转的集中方式都列出来,根据具体情况运用
  • springMVC 几种页面跳转方式

    千次阅读 2018-07-13 09:53:50
    原文地址:点击打开链接前面已经了解了Controller的几种配置方式 今天主要写一下响应界面跳转的几种方式1.在注解的方式中1.1通过HttpServletResponse的API直接输出(不需要配置渲染器)controller类的主要代码 12@...
  • Struts2页面跳转方式

    千次阅读 2018-06-27 21:18:13
     标签中间的值 跳转页面的地址  -->  <result name="success"type=" dispatcher ">/hello.html</result>   2、 重定向  <!--  result  name 对应的是action类中的method的返回值  名字可以随便写,只要...
  • IOS 页面跳转方式总结

    千次阅读 2013-04-12 10:13:50
    跳转:[self presentModalViewController:control animated:YES]; 返回:[self dismissModalViewControllerAnimated:YES]; //方法二: 跳转:[self.navigationController pushViewController:...
  • html页面跳转方式和a标签的应用

    千次阅读 2019-01-15 17:53:02
    html页面跳转方式和a标签的应用 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;!--1.页面自动跳转--&gt; &lt;...
  • javascript中页面跳转方式

    千次阅读 2016-10-29 23:47:49
    1.我们最常见到的,用的最多的是window.location.href方式 :window.location.href = 'http://localhost/04interesting/11js/05js-Internet/03pagejump/2.html'; location.href = 'http://localhost/04interesting/1
  • 页面跳转 navigator 页面链接 navigate 对应 wx.navigateTo 的功能 wx.navigateTo保留当前页面,跳转下一页(非tabBar 页面) redirect 对应 wx.redirectTo 的功能 wx.redirectTo关闭当前页面,跳转指定...
  • 要清楚的是:Vue中都是单页面应用居多,而所谓的页面跳转,也是通过路由重新渲染了一下视图,而不是真正的页面跳转。 一、标签跳转:<router-link> 映射路由 1、不带参数跳转 <!-- home页面(首页) ...
  • vue的拦截器中路由页面跳转方式

    千次阅读 2017-05-05 17:10:00
    vue的拦截器中路由页面跳转方式 var vm = new Vue({ el: '#app', router, template: '<App/>', components: {App} }); Vue.http.interceptors.push((reque...
  • j2ee页面跳转方式

    千次阅读 2016-03-18 16:58:34
     JSP页面跳转方法荟萃  1. response.sendRedirct("跳转到页面");  该方法通过修改HTTP协议的HEADER部分,对浏览器下达重定向指令的,使浏览器显示重定向网页的内容. request无法传值过去.  执行完该页所有...
  • JSP三种页面跳转方式

    千次阅读 2008-07-17 20:46:00
    JSP三种页面跳转方式 昨天在研究jsp页面跳转,费了好大的劲才完成在电视上的使用。在网上找了一些资料,加上自己的心得,跟大家分享一下。使用JSP大约有下列三种跳转方式: 1. response.sendRedirect(跳转地址); ...
  • 1,你不知道的 JavaScript - “this”  ...2,javascript 指定网页跳转方式 两个提交按钮来提交到不同的页面 用 Javascriopt 脚本来实现: name=form1 method=post> ..........
  • ASP三种页面跳转方式比较

    千次阅读 2011-04-10 01:07:00
    ASP有三种页面跳转方式,分别是HttpResponse.Redirect, Server.Transfer, Server.Execute ,下面分别说明。 HttpResponse.Redirect   <br />这个跳转页面之方法跳转之速度不快,因为它要走2个...
  • uni-app 页面跳转方式

    千次阅读 2020-05-12 12:25:43
    // 关闭页面 uni.redirectTo({ url: '../info/info‘ }); // 遮挡页面 常用 uni.navigateTo({ url: 'test?id=1&name=uniapp’ }); } // 跳到底部导航页面 daohang(){ uni....
  • H5交互的页面跳转方式总结

    千次阅读 2019-05-15 13:33:11
    用户在页面 1 点击跳转,需要向服务端请求页面 2,请求成功后渲染。而用户返回时,相当于是点击了浏览器的返回,页面退回到之前的历史记录,并重新加载出来。 在这样的模式下,页面间切换慢、不流畅的问题比较突出,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 316,985
精华内容 126,794
关键字:

网页跳转方式