商艳涛 / other-demo · Commits

Commit 86fd750fdae1917b1e12c9fd942615b734f0be92

Authored by 商艳涛
1 parent 3ed880c8
build: skipped

postMessage 小小的技术调研

Inline Side-by-side
Showing 13 changed files with 299 additions and 0 deletions
postMessage/demo1/popup/base.js 0 → 100644
  View file @86fd750
  1 +function getQuery(name) {
  2 + var result = window.location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
  3 + if (result == null || result.length < 1)
  4 + return undefined;
  5 + return decodeURIComponent(result[1]);
  6 +}
0 7 \ No newline at end of file
... ...
postMessage/demo1/popup/index.html 0 → 100644
  View file @86fd750
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title>B页面</title>
  6 + <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  7 +</head>
  8 +<body>
  9 +
  10 + <a href="javascript:;" class="btn">跳转</a>
  11 + <a href="javascript:;" class="btn1">发送消息</a>
  12 + <script src="base.js"></script>
  13 + <script type="text/javascript">
  14 + (function(){
  15 + var _source = getQuery('source');
  16 + $(document).on('click', '.btn', function(){
  17 + window.location.href = "http://127.0.0.1:3010/a.html?source=" + _source;
  18 + });
  19 + $(document).on('click', '.btn1', function(){
  20 + window.opener.postMessage({
  21 + "status": 200,
  22 + "data": {
  23 + "source": window.location.href
  24 + }
  25 + }, _source);
  26 + });
  27 + })()
  28 + </script>
  29 +</body>
  30 +</html>
0 31 \ No newline at end of file
... ...
postMessage/demo1/readme.md 0 → 100644
  View file @86fd750
  1 +# demo1 README
  2 +
  3 +目的：
  4 +
  5 +[target中页面index.html]点击按钮【新窗口】打开popup中index页面，[popup中index页面]录制完【重定向】到[target中页面a.html]，[target中页面a.html]处理通知[target中页面index.html]，[target中页面a.html]执行关闭【新窗口】动作
  6 +
  7 +## 启动调试
  8 +
  9 +需要启动两个服务 target、popup。
  10 +
  11 +### 启动 target 服务
  12 +
  13 +```
  14 +http-server -p 3010 ./target
  15 +```
  16 +
  17 +### 启动 popup 服务
  18 +
  19 +```
  20 +http-server -p 3011 ./target
  21 +```
  22 +
  23 +
  24 +在浏览器打开：[http://127.0.0.1:3010](http://127.0.0.1:3010)
  25 +
  26 +
  27 +# 文档
  28 +
  29 +- [window.postMessage 文档](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage)
  30 +- [http-server 文档](https://github.com/indexzero/http-server)
0 31 \ No newline at end of file
... ...
postMessage/demo1/target/a.html 0 → 100644
  View file @86fd750
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title>A a.html</title>
  6 + <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  7 +</head>
  8 +<body>
  9 + <a href="javascript:;" class="btn">点击了</a>
  10 + <script src="base.js"></script>
  11 + <script type="text/javascript">
  12 + (function(){
  13 + var _source = getQuery('source');
  14 + $(document).on('click', '.btn', function(){
  15 + window.opener.postMessage({
  16 + "status": 200,
  17 + "data": {
  18 + "source": window.location.href
  19 + }
  20 + }, _source);
  21 + parent.window.close();
  22 + });
  23 + })();
  24 + </script>
  25 +</body>
  26 +</html>
0 27 \ No newline at end of file
... ...
postMessage/demo1/target/base.js 0 → 100644
  View file @86fd750
  1 +function getQuery(name) {
  2 + var result = window.location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
  3 + if (result == null || result.length < 1)
  4 + return undefined;
  5 + return decodeURIComponent(result[1]);
  6 +}
0 7 \ No newline at end of file
... ...
postMessage/demo1/target/index.html 0 → 100644
  View file @86fd750
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title>A index.html</title>
  6 + <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  7 +</head>
  8 +<body>
  9 + <a href="javascript:;" class="btn">打开页面</a>
  10 + <p id="message"></p>
  11 + <script type="text/javascript">
  12 + (function(){
  13 + $(document).on('click', '.btn', function(){
  14 + window.open("http://127.0.0.1:3011/index.html?source="+ window.location.origin, "mywindow", "width="+ window.screen.width/2 +",height="+ window.screen.height/2);
  15 + });
  16 +
  17 + // Create IE + others compatible event handler
  18 + // 这里用了 postMessage，参见更多：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
  19 + var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
  20 + var eventer = window[eventMethod];
  21 + var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
  22 +
  23 + function getCurrentTime(){
  24 + return new Date().getHours() + ":" + new Date().getMinutes() + ":" + new Date().getSeconds();
  25 + }
  26 +
  27 + eventer(messageEvent, function(e) {
  28 + console.log('message：')
  29 + console.log(e)
  30 + $('#message').append("message：" + JSON.stringify(e.data) + "；时间：" + getCurrentTime() + "<br />")
  31 + // Check if origin is proper
  32 + if (e.origin != window.location.origin) {
  33 + return
  34 + }
  35 + console.log('parent received message!: ', e.data);
  36 + $('#message').append("message：popup窗口已关闭；时间：" + getCurrentTime() + "<br />")
  37 + }, false);
  38 + })();
  39 + </script>
  40 +</body>
  41 +</html>
0 42 \ No newline at end of file
... ...
postMessage/demo2/popup/base.js 0 → 100644
  View file @86fd750
  1 +function getQuery(name) {
  2 + var result = window.location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
  3 + if (result == null || result.length < 1)
  4 + return undefined;
  5 + return decodeURIComponent(result[1]);
  6 +}
0 7 \ No newline at end of file
... ...
postMessage/demo2/popup/index.html 0 → 100644
  View file @86fd750
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title>B页面</title>
  6 + <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  7 +</head>
  8 +<body>
  9 +
  10 + <a href="javascript:;" class="btn">跳转</a>
  11 + <a href="javascript:;" class="btn1">发送消息</a>
  12 + <iframe src="http://127.0.0.1:3010/a.html"></iframe>
  13 + <script src="base.js"></script>
  14 + <script type="text/javascript">
  15 + (function(){
  16 + var _source = getQuery('source');
  17 + $(document).on('click', '.btn', function(){
  18 + window.location.href = "http://127.0.0.1:3010/a.html?source=" + _source;
  19 + });
  20 + $(document).on('click', '.btn1', function(){
  21 + window.opener.postMessage({
  22 + "status": 200,
  23 + "data": {
  24 + "source": window.location.href
  25 + }
  26 + }, _source);
  27 + });
  28 + })()
  29 + </script>
  30 +</body>
  31 +</html>
0 32 \ No newline at end of file
... ...
postMessage/demo2/readme.md 0 → 100644
  View file @86fd750
  1 +# demo2 README
  2 +
  3 +目的：
  4 +
  5 +[target中页面index.html]点击按钮【新窗口】打开popup中index页面，[popup中index页面]录制完虚拟弹窗的形式iframe嵌入[target中页面a.html]，[target中页面a.html]处理通知[target中页面index.html]，[target中页面a.html]执行关闭【新窗口】动作
  6 +
  7 +## 启动调试
  8 +
  9 +需要启动两个服务 target、popup。
  10 +
  11 +### 启动 target 服务
  12 +
  13 +```
  14 +http-server -p 3010 ./target
  15 +```
  16 +
  17 +### 启动 popup 服务
  18 +
  19 +```
  20 +http-server -p 3011 ./target
  21 +```
  22 +
  23 +在浏览器打开：[http://127.0.0.1:3010](http://127.0.0.1:3010)
  24 +
  25 +# 文档
  26 +
  27 +- [window.postMessage 文档](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage)
  28 +- [http-server 文档](https://github.com/indexzero/http-server)
0 29 \ No newline at end of file
... ...
postMessage/demo2/target/a.html 0 → 100644
  View file @86fd750
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title>A a.html</title>
  6 + <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  7 +</head>
  8 +<body>
  9 + <a href="javascript:;" class="btn">点击了</a>
  10 + <script src="base.js"></script>
  11 + <script type="text/javascript">
  12 + (function(){
  13 + var _source = getQuery('source');
  14 + $(document).on('click', '.btn', function(){
  15 + window.opener.postMessage({
  16 + "status": 200,
  17 + "data": {
  18 + "source": window.location.href
  19 + }
  20 + }, _source);
  21 + parent.window.close();
  22 + });
  23 + })();
  24 + </script>
  25 +</body>
  26 +</html>
0 27 \ No newline at end of file
... ...
postMessage/demo2/target/base.js 0 → 100644
  View file @86fd750
  1 +function getQuery(name) {
  2 + var result = window.location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));
  3 + if (result == null || result.length < 1)
  4 + return undefined;
  5 + return decodeURIComponent(result[1]);
  6 +}
0 7 \ No newline at end of file
... ...
postMessage/demo2/target/index.html 0 → 100644
  View file @86fd750
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title>A index.html</title>
  6 + <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  7 +</head>
  8 +<body>
  9 + <a href="javascript:;" class="btn">打开页面</a>
  10 + <script type="text/javascript">
  11 + (function(){
  12 + $(document).on('click', '.btn', function(){
  13 + window.open("http://127.0.0.1:3011/index.html?source="+ window.location.origin, "mywindow", "width="+ window.screen.width/2 +",height="+ window.screen.height/2);
  14 + });
  15 +
  16 + // Create IE + others compatible event handler
  17 + // 这里用了 postMessage，参见更多：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
  18 + var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
  19 + var eventer = window[eventMethod];
  20 + var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
  21 +
  22 + function getCurrentTime(){
  23 + return new Date().getHours() + ":" + new Date().getMinutes() + ":" + new Date().getSeconds();
  24 + }
  25 +
  26 + eventer(messageEvent, function(e) {
  27 + console.log('message：')
  28 + console.log(e)
  29 + $('#message').append("message：" + JSON.stringify(e.data) + "；时间：" + getCurrentTime() + "<br />")
  30 + // Check if origin is proper
  31 + if (e.origin != window.location.origin) {
  32 + return
  33 + }
  34 + console.log('parent received message!: ', e.data);
  35 + $('#message').append("message：popup窗口已关闭；时间：" + getCurrentTime() + "<br />")
  36 + }, false);
  37 + })();
  38 + </script>
  39 +</body>
  40 +</html>
0 41 \ No newline at end of file
... ...
postMessage/readme.md 0 → 100644
  View file @86fd750
  1 +# postMessage 小小的技术调研
  2 +
  3 +## demo1
  4 +
  5 +目的：
  6 +
  7 +> [target中页面index.html]点击按钮【新窗口】打开popup中index页面，[popup中index页面]录制完【重定向】到[target中页面a.html]，[target中页面a.html]处理通知[target中页面index.html]，[target中页面a.html]执行关闭【新窗口】动作
  8 +
  9 +[详细查看demo1 readme.md](./demo1/readme.md)
  10 +
  11 +## demo2
  12 +
  13 +目的：
  14 +
  15 +> [target中页面index.html]点击按钮【新窗口】打开popup中index页面，[popup中index页面]录制完虚拟弹窗的形式iframe嵌入[target中页面a.html]，[target中页面a.html]处理通知[target中页面index.html]，[target中页面a.html]执行关闭【新窗口】动作
  16 +>
  17 +> [详细查看demo2 readme.md](./demo2/readme.md)
  18 +
  19 +
  20 +# 文档
  21 +
  22 +- [window.postMessage 文档](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage)
  23 +- [http-server 文档](https://github.com/indexzero/http-server)
0 24 \ No newline at end of file
... ...