browser.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>加载外链的页面</title>
  6. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  7. <link rel="stylesheet" href="../../../common/cross/css/cross.css">
  8. <link rel="stylesheet" href="../../../common/cross/css/cross.ui.css">
  9. <style type="text/css">
  10. .mui-icon-left-nav{
  11. display: block;
  12. width: 45px;
  13. height: 45px;
  14. position: absolute;
  15. left: 0;
  16. top: 0;
  17. }
  18. .demo-comtop .mui-icon-left-nav:before {
  19. content: '';
  20. display: block;
  21. width: 12px;
  22. height: 12px;
  23. border: solid #fff;
  24. border-width: 1px 1px 0 0;
  25. transform: rotate(-135deg);
  26. -webkit-transform: rotate(-135deg);
  27. -moz-transform: rotate(-135deg);
  28. -ms-transform: rotate(-135deg);
  29. position: absolute;
  30. left: 18px;
  31. top: 16px;
  32. }
  33. .mui-icon-right-nav{
  34. position: absolute;
  35. top: 0;
  36. right: 0;
  37. width: 45px;
  38. height: 45px;
  39. }
  40. .mui-icon-right-nav img{
  41. vertical-align: middle;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <header class="h45">
  47. <div class="demo-comtop">
  48. <a class="mui-icon-left-nav" id="go_back"></a>
  49. <a class="mui-icon-right-nav c-hide" id="close"><img src="../../../common/images/close.png" width="17"></i></a>
  50. <h1 id="title"></h1>
  51. </div>
  52. </header>
  53. <script src="../../../js/jquery/2.1.3/jquery.js"></script>
  54. <script src="../../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
  55. <script type="text/javascript">
  56. var url = "",
  57. subWebview = null;
  58. mui.init();
  59. mui.plusReady(function() {
  60. var self = plus.webview.currentWebview();
  61. url = self.url;
  62. var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
  63. var objExp=new RegExp(reg);
  64. if(url && !objExp.test(url)){
  65. url = "http://"+url;
  66. }
  67. subWebview = plus.webview.create(url, "sub", {
  68. top: "45px",
  69. bottom: 0
  70. });
  71. subWebview.addEventListener( "titleUpdate", function(e){
  72. console.log(e);
  73. $("#title").text(e.title);
  74. subWebview.canBack(function(event){
  75. var canback = event.canBack;
  76. if(canback){
  77. $("#close").show();
  78. }else{
  79. $("#close").hide();
  80. }
  81. });
  82. }, false );
  83. self.append(subWebview);
  84. /*
  85. * evalJS,在ios系统,只有在loaded事件后才能触发
  86. */
  87. subWebview.addEventListener('loaded', function() {
  88. subWebview.evalJS('$("body").css("max-width","none")');
  89. });
  90. /**
  91. * 监听子窗口对象是否可后退
  92. * http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.canBack
  93. */
  94. document.getElementById("go_back").addEventListener("tap", function() {
  95. subWebview.canBack(function(event) {
  96. var canBack = event.canBack;
  97. if(canBack) {
  98. subWebview.back();
  99. } else {
  100. mui.back();
  101. }
  102. });
  103. });
  104. document.getElementById("close").addEventListener("tap", function() {
  105. mui.back();
  106. });
  107. });
  108. </script>
  109. </body>
  110. </html>