zoukankan      html  css  js  c++  java
  • 去除ios移动端alert/confirm的网址(url)

    在移动端使用原生的alert/confirm总是会显示网址(url),界面看起来很丑,搜索半天也找不到解决办法,在绝望的时候看到一篇文章写的很好,在此感谢http://ifindever.com/archives/260.html,还希望能帮助到大家。

    最近在做小小创客 webapp,碰到一个问题,以前的版本,ios 和Android都可以通过重写webview的alert等弹窗事件来隐藏掉弹窗的标题,但是ios7之后,api被禁用了,导致ios无法重写隐藏标题:

    1.通过js调用ios原生代码来实现,即:window.alert = function(str){window.local.href = " xx://str/" +str}

    2.js+html+css模拟,但是为了实现alert等的阻塞执行,需要把后面的代码放入回调函数中执行

    但是还是感觉这两种方式实现不太优雅,都需要对现有代码做比较大的改动,不死心,于是继续google,终于发现个好办法:

    [javascript] view plain copy
     
    1. <span style="font-size:10px;">     <script>  
    2.         window.alert = function(name){  
    3.              var iframe = document.createElement("IFRAME");  
    4.             iframe.style.display="none";  
    5.             iframe.setAttribute("src", 'data:text/plain,');  
    6.             document.documentElement.appendChild(iframe);  
    7.             window.frames[0].window.alert(name);  
    8.             iframe.parentNode.removeChild(iframe);  
    9.         }  
    10.               
    11.         alert('xxx');  
    12.         </script></span>  


    这个方法在于重写了alert方法(confirm方法同理),不需要改动现有代码,并且解决了弹窗标题出现网址的问题。不过需要注意的是,每次在框架中执行完一个alert/confirm后,需要将框架移除,下次再重新载入,否则在chrome中会引发跨域执行,从而被chrome拦截。

    这里还有confirm,重写window.confirm之后,确认和取消点击的事件都是执行取消,这时需要这样写:

    confirm需要return子框架的结果:

    [javascript] view plain copy
     
      1. var result = window.frames[0].window.confirm(name);  
      2.     iframe.parentNode.removeChild(iframe);  
      3.     return result;  

     解决ios弹框显示地址的问题

    /*解决ios弹框显示地址的问题 start*/
    			window.confirm = function(name){
    				var iframe = document.createElement("IFRAME");
    				iframe.style.display="none";
    				iframe.setAttribute("src", 'data:text/plain,');
    				document.documentElement.appendChild(iframe);
    				var result=window.frames[0].window.confirm(name);
    				iframe.parentNode.removeChild(iframe);
    				return result;
    			}
    /*解决ios弹框显示地址的问题 end*/
    

      

    地址:http://blog.csdn.net/hx_lei/article/details/51212336

  • 相关阅读:
    数据持久化的基础知识
    svn常用命令
    关于SVN 目录结构
    linux查看CPU信息
    一个服务器上启动两台tomcat
    centos6.0 配置SVN
    mysql插入表情
    MAC 安装 PIL
    安装freetype
    Hadoop基本文件命令
  • 原文地址:https://www.cnblogs.com/important/p/7580682.html
Copyright © 2011-2022 走看看