-
Notifications
You must be signed in to change notification settings - Fork 1
/
hframe.js
130 lines (119 loc) · 3.92 KB
/
hframe.js
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
126
127
128
129
130
/*API
1.在网页中使用<h-frame>标签来使用跨域框架
实例:<h-frame src="demo.html"></h-frame>
使用<script src="hframe" defer></script>
来使用脚本,必须声明defer!
2.脚本应用后自动向父窗口开启连接
3.若不慎丢失hframe.window或失效(基本上不会),可以将
父级hframe.window设置成null,子级发送任意数据来重新
连接,父级会将此数据内容作废,并同样触发connect事件
4.需要在子窗口也使用hframe脚本
HFrame.send(msg,target):向target发送信息,若未指
定target则向父窗口发送信息
hframe.connect事件():当通道连接完成后触发
hframe.msg事件(msg):有来自本窗口的消息时触发
hframe.window:已建立通道的窗口,若未建立则是null
hframe.src:定义地址
hframw.fullScreen:全屏
window.msg事件(msg):有从父级窗口发来消息时触发
*/
//try{
class HFrame extends HTMLElement {
constructor() {
try {
//事件:msg,connect
super();
this._fullScreen = false;
this._style = "";
let ifr = this.iframe = document.createElement("iframe");
this.window = null;
this.appendChild(ifr);
ifr.style = "width:100%;height:100%;border:none;margin:0;";
//ifr.sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts";
window.addEventListener("message", (message) => {
let { data, source } = message;
if (source != ifr.contentWindow) {
return;
}
if (!this.window) {
this.window = source;
this._emit("connect");
return;
}
this._emit("msg", data);
}, false);
ifr.addEventListener("load", () => {
this.window = null;
});
this._iframe = ifr;
this.src = this.getAttribute("src") || "";
} catch (err) { alert(err); }
}
_emit(name, obj, bb, cc) {
HFrame.emit(this, name, obj, bb, cc);
}
set src(v) {
this.iframe.src = v;
this.window = null;
}
get src() {
return this.iframe.src;
}
set fullScreen(v) {
v = Boolean(v);
if (v == this._fullScreen) return;
if (v) {
this._style = this.getAttribute("style");
super.style =
`display:block;
position:fixed;
width:100%;height:100%;
margin:0;padding:0;
box-sizing:border-box;
background-color:white;`;
} else {
//super.style="";
try {
super.style = this._style;
} catch (err) { alert(err); }
}
this._fullScreen = v;
}
get fullScreen() {
return this._fullScreen;
}
set style(v) {
if (this._fullScreen)
throw "Only cancel the full screen mode can you set style";
super.style = v;
}
get style() {
return super.style;
}
send(msg) {
if (!this.window) throw "The frame cannot be call without connection.";
this.window.postMessage(msg, "*");
}
static send(msg, tar = window.parent) {
tar.postMessage(msg, "*");
}
static emit(ref, name, obj, bb, cc) {
let a = new CustomEvent(name, {
detail: obj,
bubbles: bb || false,
cancelable: cc || false
});
ref.dispatchEvent(a);
}
}
customElements.define("h-frame", HFrame);
window.addEventListener("load", () => {
if (window.parent != window) HFrame.send("");
});
if (window.parent != window)
window.addEventListener("message", (message) => {
let { data, source } = message;
if (source != window.parent) return;
HFrame.emit(window, "msg", data, true);
});
//}catch(err){alert(err)}