-
Notifications
You must be signed in to change notification settings - Fork 0
/
outerLink.html
125 lines (123 loc) · 3.93 KB
/
outerLink.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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<!--<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"/>-->
<!--<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>-->
<!--<meta http-equiv="Pragma" content="no-cache"/>-->
<!--<meta http-equiv="Expires" content="0"/>-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
html,body{
padding:0;
margin:0;
width:100%;
height:100%;
}
.fixedLayout{
position:fixed;
top:0;left:0;right:0;bottom:0;
}
.nav{
width:100%;
height:40px;
display: flex;
justify-content: space-between;
}
.nav > span{
display: inline-block;
width: 50%;
line-height: 40px;
text-align: center;
}
</style>
<link style="stylesheet" href="./photoswipe/photoswipe.js?t=system_time()" />
</head>
<body>
<div style="width:100%;height:100%;overflow:auto;">
<div style="background:#333;height:210px"></div>
<div class="nav">
<span class="live">视频直播</span>
<span class="photo">照片直播</span>
</div>
<iframe id="frame" style="width:100%;height:calc(100% - 300px);display:none;" src="http://192.168.0.124:8080/m/simpleAlbum?taskId=5d90ae5d7b16324b902524d5"></iframe>
</div>
<script src="zepto.min.js"></script>
<script>
$(document).ready(function(){
window.addEventListener('message',function(event){
//此处执行事件
let data = event.data;
sendImg(data.src);
});
$('.photo').on('click',function() {
$('#frame').css('display','block');
});
$('.live').on('click', function(){
$('#frame').css('display','none');
})
function sendImg(src){
if(src){
$('#send').attr('src',src);
try{
$('#send').trigger('touchstart');
}catch(err){
console.log(err);
}
$('#send').css('display','block');
$('#send').addClass('fixedLayout');
}else{
$('#send').removeClass('fixedLayout');
$('#send').css('display','none');
}
}
// IframeOnClick.track(document.getElementById("frame"), function() { console.log('a click'); });
// $('#frame').on('touchstart',function(){
// console.log('touchstart capture');
// })
// var event = new Event('CustomEvent');
// 监听
// elem.addEventListener('CustomEvent', function (e) { ... }, false);
// 触发event
// elem.dispatchEvent(event);
});
// function print(){
// console.log('print log');
// }
// var IframeOnClick = {
// resolution: 200,
// iframes: [],
// interval: null,
// Iframe: function() {
// this.element = arguments[0];
// this.cb = arguments[1];
// this.hasTracked = false;
// },
// track: function(element, cb) {
// this.iframes.push(new this.Iframe(element, cb));
// if (!this.interval) {
// var _this = this;
// this.interval = setInterval(function() { _this.checkClick(); }, this.resolution);
// }
// },
// checkClick: function() {
// if (document.activeElement) {
// var activeElement = document.activeElement;
// for (var i in this.iframes) {
// if (activeElement === this.iframes[i].element) { // user is in this Iframe
// if (this.iframes[i].hasTracked == false) {
// this.iframes[i].cb.apply(window, []);
// this.iframes[i].hasTracked = true;
// }
// } else {
// this.iframes[i].hasTracked = false;
// }
// }
// }
// }
// };
</script>
</body>
</html>