怎么让js打开页面就是全屏的方法,学习实践

2019-12-19 01:23栏目:网络技术
TAG:

怎么让js张开页面便是全屏的不二秘技

 js张开页面正是全屏的法子

 

<script language="javaScript">
function intro()
{
if ((navigator.appVersion.indexOf("Mac")!=-1) &&
(navigator.userAgent.indexOf("MSIE")!=-1) &&
(parseInt(navigator.appVersion)=4))
{
skip()
}
else 
{ 
popup()
}

}
function skip()
{
location.href="http://www.bkjia.com//";
}
function popup()
{
version =parseFloat
(navigator.appVersion.substring(navigator.appVersion.indexOf('.')-1,navigator.appVersion.length));
if (version >=4)
version = parseFloat
(navigator.appVersion.substring(navigator.appVersion.indexOf('.')-1,navigator.appVersion.length));
if (version >= 4)

{
if (navigator.appName=="Netscape")
{
Hello = window.open("http://www.bkjia.com/","Hello","scrollbars");
Hello.focus();

}


if (navigator.appName=="Microsoft Internet Explorer")
{
window.open("http://www.bkjia.com/","screen","fullscreen==yes");
}
}
else
{
location.href="http://www.bkjia.com/";
}

}
</script>
<BODY onload=intro()>
</BODY></HTML> 

js张开页面就是全屏的秘技 script language=javaScriptfunction intro(卡塔尔{if ((navigator.appVersion.indexOf(Mac卡塔尔!=-1) (navigator.u...

guide.html最后处理

利益是能够让项目各模块构造更为清楚,也便于管理供给做modal跳转的页面,如login

H5+

H5+ storage文档

Storage模块管理采用本地数据存款和储蓄区,用于选用数据的保存和读取。应用本地数据与localStorage、sessionStorage的区别在于数量有效域分裂,前面一个可在动用内跨域操作,数据存款和储蓄期是持久化的,並且未有容积节制。通过plus.storage可获取使用本地数据管理对象。
getItem: 通过键(key卡塔尔(قطر‎检索获取使用存款和储蓄的值
setItem: 纠正或增多键值(key-value卡塔尔(قطر‎对数码到使用数据存储中
clear: 覆灭应用具备的键值对存款和储蓄数据

  • ** plus.storage.getItem();**
  • ** plus.storage.setItem();**

H5+ navigator

navigator用于管理浏览器运维意况信息
closeSplashscreen: 关闭程序运转分界面
setFullscreen: 设置使用是否全屏突显

  • ** plus.navigator.closeSplashscreen();**
  • ** plus.navigator.setFullscreen();**

做web app,叁个不可能隐讳的主题材料便是转场动漫;web是依附链接创设的,从多少个页面点击链接跳转到另一个页面,若是因而有刷新的张开药方式,顾客要面前遇到二个空荡荡的页面等待;如果经过无刷新的不二等秘书籍,用Javascript移入DOM节点(视而不见的SPA施工方案),会遇见非常高的性情挑衅:DOM节点许多,页面太大,转场动漫不流利以至变成浏览器崩溃; mui的消除思路是:单webview只承载单个页面的dom,缩小dom层级及页面大小;页面切换使用原生动漫,将最耗品质的风姿罗曼蒂克部分提交原生完成.

mui.openWindow

  • **mui.openWindow(卡塔尔国//张开新的页面 **

app.js

// 主StackNavigator,里面可以加入别的StackNavigator模块,或者加入screen
const RoutersStack = StackNavigator(
  {
    authenStack:{
      screen: authenStack,
    },
    FinanceManageStack: {
      screen: FinanceManageStack,
    },
    Set: {
      screen: Set,
    },
  },
  StackNavigatorConfig({
    initialRouteName: 'authenStack',
  }),
);
//将HomeIndex和Login单独放在一起,login登录页可以实现modal跳转,如果有别的页面需要modal跳转,也可以单独新建一个StackNavigator来进行管理
const authenStack = StackNavigator({
  HomeIndex: {
    screen: HomeIndex,
  },
  Login:{
    screen:Login,
    navigationOptions:{
      headerTitle:'Login',
    }
  }
},{
  mode:'modal',
});
// 财务管理模块,放财务相关的,FinanceManageHomeIndex是财务管理首页。项目里面可以放多个这种StackNavigator进行管理
const FinanceManageStack=StackNavigator(
  {
    FinanceManageHomeIndex:{
      screen:FinanceManageHomeIndex
    },
    TransactionWithdrawGoWithdraw:{
      screen:TransactionWithdrawGoWithdraw
    },
    TransactionWithdraw:{
      screen:TransactionWithdraw
    }
  },
  StackNavigatorConfig({
    initialRouteName: 'FinanceManageHomeIndex',
  }),
)

  export default class App extends Component {
    componentDidMount() {

    }
    render () {
      return (
        <Provider rootStore={new RootStore()}>
          <RoutersStack />
        </Provider>
      )
    }
}

只顾上面的StackNavigatorConfig是本人要好写的多个办法,用来安顿navigation的,这里能够不写那些主意,根据官方网址文书档案写本身的配置

问题

  • 怎么着兑现易地而处页只现出一回(料定得记录多个值来决断)
  • 毕竟是先加载index.html 仍然guide.html
  • 最实际的 案例里的代码在哪呢?

管住页面跳转

作者使用过的军事关押页面跳转首要有方法,

  • 使用redux或者mobx来管理navigation
  • 使用页面传参navigation,this.props.navigation的navigate进行跳转(这种navigation须要传入各个页面)
  • 确立三个大局的RoutesUtils类来治本navigation

逻辑顺序

  1. 在哪 判断 加载过guide.html
  2. 判断 是否 加载过guide.html
  3. 在哪关闭程序运维分界面
  4. 加载guide.html后 记录个暗记
  5. 为了便利调节和测量试验查看效果 怎样破除标识

此地以第两种为例,大致都大致:

  • 页面跳转直接动用this.props.navigation.navigate(name卡塔尔(英语:State of Qatar)。
    注意:假诺在四个StackNavigator跳往此外叁个模块的主页,记得name不要写screen页面名称,如本身要求在别的StackNavigator跳到财务管理模块首页,写this.props.navigation.navigate('FinanceManageStack'卡塔尔,当时会自行张开FinanceManageStack上边包车型地铁第二个页面FinanceManageHomeIndex,要是写this.props.navigation.navigate('FinanceManageHomeIndex'),那么FinanceManageHomeIndex会进去两遍。
  • 归来上生机勃勃页面
    this.props.navigation.goBack(卡塔尔在FinanceManageStack下的首先个有页面使用会失灵。如我在FinanceManageHomeIndex页面进行再次回到跳转,this.props.navigation.goBack(卡塔尔(英语:State of Qatar)那个方法会失效,在其余页面不奇怪。必要改成this.props.navigation.goBack(null卡塔尔(قطر‎.这里或许有版本差别,小编动用的本子是"react-navigation": "1.0.0-beta.21",

为了弄那一点东西,折腾了大半一天,中间大多少个坑,谢谢竹子(https://blog.csdn.net/u010411264)的支持

正题

[6.0.0.201506290132]新增加App第壹遍开发银行应接页,也正是mui项目中examples/guide.htmlAPP运转流程:1. APP运营展开运维页面,也等于splashscreen,能够在manifest.html中安装自动关闭只怕手动关闭:代码视图中plus下的splashscreen,autoclose值为false即须求手动关闭,值为true即自动关闭;2. 进来安装的输入页面webview;在进口页面或然入口页面包车型大巴子webview即APP运维后就施行js的webview中判别APP是不是为率先次开发银行。怎么样决断呢?使用localStorage,那么些很简短就背着了;若不是第2回张开,则供给采用plus.navigator.closeSplashscreen(卡塔尔来关闭运维漫面;若为首回张开,则步入guide.html,在guide.html加载完后供给关闭运维漫面;3. guide.html跳转至入口页面;
在MUI demo中,决断是或不是为第二遍运行APP的代码在入口页面index.html的子页面list.html中;
看demo时开掘只要ios则设置全屏(彰显顶上部分状态栏卡塔尔国,作者测量检验了下,ios和安卓都可以全屏,不亮堂hbcui壹玖捌肆为啥这么写,作者看了下一些个安卓应用程式的guide都不是全屏的;
至于在应用过程中冒出的主题素材:1.有的娃子做出来现在表现是看出运维漫面后先看见入口页面,然后才看见guide页面,那是因为未准确安装运维漫面的关闭;
若反常,请在评价中提议。by 鑫花璐放

问答链接
当真是找了旷日悠久,mui案例的index.html都快翻烂了,总算在论坛上找到了答案,真是谢谢前辈们;
翻开案例知道了 (实际上是)manifest.json文件中安装了默许加载的是index.html(也是本人干吗走了半天弯路的来由);
所以符合规律我们相应在index.html中推断guide.html加载意况(因为是H5+,所以我们写在mui.plusReady(卡塔尔(英语:State of Qatar)方法中),之后手动关闭运转页,并且安装是不是全屏显示(非游戏没必要全屏)

//写在index.html
mui.plusReady(function() {

                var showGuide=plus.storage.getItem('launch');
                if (showGuide) {
                    //关闭启动页(splash页)
                    plus.navigator.closeSplashscreen();
                    //是否全屏显示应用
                    plus.navigator.setFullscreen(false);
                } else{
                    mui.openWindow({
                        id:'guide',
                        url:'guide.html',
                        show:{
                            aniShow:'none'
                        },
                        waiting:{
                            autoShow:false
                        }
                    });
                }

万黄金年代第二回加载 则要求再guide.html中关闭运营页 设置展现方式
(平时是点击 立时体验 之类的按键 叁个tap事件 记录 关闭运营页 关闭当前窗口)

//写在guide.html中
mui.plusReady(function() {
    if (mui.os.ios) {
        plus.navigator.setFullscreen(true);
    }
    plus.navigator.closeSplashscreen();

    document.getElementById('colse').addEventListener('tap', function(event) {
        plus.storage.setItem("launch", "true");
        plus.navigator.setFullscreen(false);
        //关闭当前窗口
        plus.webview.currentWebview().close();

    },false);
});

图片 1

也足以是开发银行页 翻到最后一页然后再翻直接到 index.html 然后实行以上动作
事件如下:

//引导页切换事件
            document.querySelector(".mui-slider").addEventListener('slide', function() {
                var index = event.detail.slideNumber;
                if () {

                } else {

                }

            });

event.detail.slideNumber 是当下slider标识 第生龙活虎页为 0 (肖似数组)(Number型)
通过对 index的推断然后施行动作;

总结

先是多谢前辈们的追究,依旧让后来者少走了不菲弯路。
轻松生出的难点 index.html大概会先于guide.html现身这里将要思忖实施各样,关闭顺序是还是不是创设了;
自己上了贼船canvas的钻研,制伏了canvas动漫的难点可是卡在 加载难点上 drawImage(卡塔尔(英语:State of Qatar)对于canvas在加载img,会在首先个slider加载时现身难点,只可以先抛开了,同期也开采了canvas动漫对canvas有了深档次的接头,canvas的研究也够人喝黄金年代壶的了。

下一次,mui提供的零器件轻便拼装

用过之后拼页面用HB 的飞跃提醒真是好快,icon的提供能够给力切合半数以上粗略的支出了,也意识了一些款有关icon 文字码的工具 好想试试,总比icon用图片方便多了;
帮朋友看EasyUI,忽地意识了bootstrap后台管理分界面包车型地铁框架,什么鬼,看着后台管理分界面也好特出,(最少感到比easyUI 自由 简洁些),有空再商量吗。

版权声明:本文由澳门新葡亰平台游戏发布于网络技术,转载请注明出处:怎么让js打开页面就是全屏的方法,学习实践