-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
147 lines (142 loc) · 7.02 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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>postMessage 主頁、iframe頁可互相傳值 - August - Let's Write</title>
<link rel="canonical" href="https://letswritetw.github.io/letswrite-postMessage/"/>
<meta property="og:url" content="https://letswritetw.github.io/letswrite-postMessage/"/>
<meta property="fb:app_id" content="911000986339138"/>
<meta property="og:type" content="website"/>
<meta property="og:site_name" content="Let's Write"/>
<meta property="og:title" content="postMessage 主頁、iframe頁可互相傳值 - August - Let's Write"/>
<meta itemprop="name" content="postMessage 主頁、iframe頁可互相傳值 - August - Let's Write"/>
<meta name="description" content="本篇大綱：前端的一個困擾 管不到 iframe。Google、Facebook也是這樣傳值的。postMessage基本使用、傳值、接值。原始碼、Demo。本篇筆記要記錄的就是A、B頁面iframe的情況下，A傳給B，或B傳給A的問題，該怎麼用postMessage來解決。"/>
<meta property="og:description" content="本篇大綱：前端的一個困擾 管不到 iframe。Google、Facebook也是這樣傳值的。postMessage基本使用、傳值、接值。原始碼、Demo。本篇筆記要記錄的就是A、B頁面iframe的情況下，A傳給B，或B傳給A的問題，該怎麼用postMessage來解決。"/>
<meta itemprop="description" content="本篇大綱：前端的一個困擾 管不到 iframe。Google、Facebook也是這樣傳值的。postMessage基本使用、傳值、接值。原始碼、Demo。本篇筆記要記錄的就是A、B頁面iframe的情況下，A傳給B，或B傳給A的問題，該怎麼用postMessage來解決。"/>
<meta itemprop="image" content="https://letswritetw.github.io/letswrite-postMessage/fb.jpg"/>
<meta property="og:image" content="https://letswritetw.github.io/letswrite-postMessage/fb.jpg"/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
<meta property="og:image:alt" content="postMessage 主頁、iframe頁可互相傳值"/>
<link rel="shortcut icon" href="https://letswritetw.github.io/letswritetw/dist/img/logo_512.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"/>
<link rel="stylesheet" href="dist/style.min.css"/>
<style>
body {
background: #F5F5F5;
}
</style>
<!-- Google Tag Manager-->
<script>
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PGQ9WQT');
</script>
</head>
<body>
<!-- Google Tag Manager (noscript)-->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PGQ9WQT" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<div class="container">
<div class="row">
<div class="twelve columns text-center">
<h1>postMessage 主頁、iframe頁可互相傳值</h1>
<h6>筆記文：<a href="https://letswrite.tw/postmessage/" target="_blank">Let's Write</a></h6>
</div>
</div>
<hr/>
<div class="row">
<div class="twelve columns">
<h2>範例1：iframe頁傳訊息給母頁</h2>
<p>子頁（iframe.tw）要傳自己的高度給母頁（mother.tw）</p>
</div>
<div class="twelve columns">
<h5>iframe.com.tw 傳訊息</h5>
<pre><code>/* iframe 的 parent 就是包它的頁面 */
window.addEventListener('load', () => {
const height = document.body.offsetHeight;
parent.postMessage(height, 'https://mother.tw'); // https://mother.tw 就是母頁的網域
});</code></pre>
</div>
<div class="twelve columns">
<h5>mother.com.tw 接訊息</h5>
<pre><code><iframe id="iframe" src="iframe/index.html"></iframe>
<script>
// 接到 message 要做什麼事的 function
function receiveMessage(e) {
// 來源網址（e.origin）不是指定的網域時
if(e.origin !== 'https://iframe.tw') {
alert('資料來源錯誤');
return false;
}
// 來源網址是指定的網域時
else {
// 拿傳來的參數（e.data）
const height = e.data;
document.getElementById('iframe').setAttribute('height', height); // 改變iframe tag height
}
}
// 監聽 message 事件
window.addEventListener('message', receiveMessage, false);
</script></code></pre>
</div>
<div class="twelve columns">
<h5>呈現結果：iframe的高度就是iframe頁面本身的高度，無縫iframe</h5>
<h6>Demo頁面來源：<a href="https://cruip.com/" target="_blank">https://cruip.com/</a></h6>
<iframe id="iframe" src="iframe/index.html" frameborder="0"></iframe>
</div>
</div>
<hr/>
<div class="row">
<div class="twelve columns">
<h2>範例2：母頁傳訊息給iframe頁</h2>
<p>母頁（mother.tw）傳訊息給子頁（iframe.tw），讓子頁內容變色。</p>
</div>
<div class="twelve columns">
<h5>mother.com.tw 按鈕click時傳訊息</h5>
<pre><code>// 抓到iframe的視窗
const iframe = document.getElementById('iframe2').contentWindow;
// 按鈕click時傳訊息
document.getElementById('blue').addEventListener('click', () => {
iframe.postMessage('lightskyblue', 'https://iframe.tw');
});</code></pre>
</div>
<div class="twelve columns">
<h5>iframe.com.tw 接到訊息時改變顏色</h5>
<pre><code>// 接到 message 要做什麼事的 function
function receiveMessage(e) {
// 來源網址（e.origin）不是指定的網域時
if(e.origin !== 'https://mother.tw') {
alert('資料來源錯誤');
return false;
}
// 來源網址是指定的網域時
else {
// 拿傳來的參數（e.data）
const bgColor = e.data;
document.querySelector('.box').setAttribute('style', 'background: ' + bgColor);
}
}
// 監聽 message 事件
window.addEventListener('message', receiveMessage, false);</code></pre>
</div>
<div class="twelve columns">
<h5>呈現結果：點以下按鈕，iframe中的box會變色</h5>
<p>為了認知是iframe，把iframe border給留著。</p>
<div>
<button id="blue" type="button">藍色</button>
<button id="gold" type="button">金色</button>
<button id="green" type="button">綠色</button>
</div>
<iframe id="iframe2" src="iframe/index2.html" height="300"></iframe>
</div>
</div>
</div>
<script src="dist/main.min.js?v=1.0.2"></script>
</body>
</html>