forked from Yakima-Teng/iframe-application
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
106 lines (100 loc) · 3.88 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 国产360浏览器默认采用高速模式渲染页面 -->
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>iframe application</title>
<link rel="shortcut icon" href="./favicon.ico" type="image-x-icon">
<link rel="stylesheet" href="./css/reset.min.css">
<link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="./css/importer.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="lib/html5shiv.min.js"></script>
<script src="lib/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="app-main-container">
<nav id="menuWrapper" class="app-menu-wrapper">
<div class="menu-toggle-wrapper">
<i id="btnToggleMenu" class="fa fa-list"></i>
</div>
<ul class="menus">
<li class="menu">
<i class="fa fa-glass"></i>
<span data-route-name="rainbow" class="title">Vue作者博客的彩色条纹</span>
</li>
<li class="menu">
<i class="fa fa-cog"></i>
<span data-route-name="city" class="title">不重复的颜色</span>
</li>
<li class="menu">
<i class="fa fa-file-image-o"></i>
<span data-route-name="particles" class="title">粒子效果</span>
</li>
<li class="menu">
<i class="fa fa-bell-o"></i>
<span data-route-name="guess" class="title">猜字母游戏</span>
</li>
<li class="menu">
<i class="fa fa-cloud-upload"></i>
<span data-route-name="upload" class="title">图片压缩上传</span>
</li>
</ul>
</nav>
<article class="app-iframe-wrapper">
<iframe id="appIframe" class="app-content-wrapper" src="" frameborder="0"></iframe>
</article>
</div>
<script src="./lib/jquery.min.js"></script>
<script src="./lib/handlebars-v4.0.5.min.js"></script>
<script>
var $menuWrapper = $('#menuWrapper')
var $appIframe = $('#appIframe')
var $menusWrapper = $('#menuWrapper .menus')
var $menus = $('#menuWrapper .menu')
var $btnToggleMenu = $('#btnToggleMenu')
// 自定义路由
var routesConfig = {
rainbow: './pages/rainbow/index.html',
city: './pages/city/index.html',
guess: './pages/guess/index.html',
particles: './pages/particles/index.html',
upload: './pages/upload/index.html'
}
function Route (routesConfig) {
this.routers = routesConfig
}
Route.prototype.go = function (options) {
var routeName = options.path
window.location.hash = '#' + routeName
var targetUrl = this.routers[routeName]
$appIframe.prop('src', targetUrl)
$menus.removeClass('active')
$menus.find('span[data-route-name=' + routeName + ']').parents('.menu').addClass('active')
}
var router = new Route(routesConfig)
$menuWrapper.on('click', '.menu', function (e) {
var $this = $(this)
var routeName = $this.find('.title').data('route-name')
router.go({ path: routeName })
})
$btnToggleMenu.click(function () {
$menusWrapper.toggleClass('show')
})
window.addEventListener('load', function () {
var hash = window.location.hash.replace('#', '')
if (Object.keys(routesConfig).indexOf(hash) === -1) {
router.go({ path: 'particles' })
} else {
router.go({ path: hash })
}
}, false)
</script>
</body>
</html>