Skip to content

Commit d664a12

Browse files
minhyeong-kimminhyeong-kim
committed
Add demo for postBridge usage (close #49)
1 parent 672fc9b commit d664a12

File tree

5 files changed

+148
-33
lines changed

5 files changed

+148
-33
lines changed

‎demo/postBridge/README.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Avoid IE11 popup POST bugs
2+
3+
IE11 can't post form data to popup window. [related issues](http://answers.microsoft.com/en-us/ie/forum/ie11-iewindows8_1/ie11-cant-post-form-data-to-specific-frame-or/481ba8d7-64cf-414f-b366-be9c809d9297?auth=1)
4+
5+
You can avoid this problem with `tui-code-snippet` popup module. please check this demo (demo/postBridge)
6+
7+
## How to execute the demo
8+
9+
1. install node dependency modules in project root
10+
11+
```
12+
npm i
13+
```
14+
15+
2. execute demo server
16+
17+
```
18+
node demo/postBridge/server.js
19+
```
20+
21+
3. connect demo page by several browsers
22+
23+
http://localhost:3000/popup.html
24+
25+
26+
You can see the popup open and receive posted data properly.

‎demo/postBridge/public/popup.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="content-type" content="text/html; charset=utf-8">
5+
<title>Popup</title>
6+
</head>
7+
<body>
8+
<div>
9+
<input type="button" id="open-popup" value="open" />
10+
</div>
11+
<script type="text/javascript" charset="utf-8" src="code-snippet.js"></script>
12+
<script type="text/javascript" charset="utf-8">
13+
(function() {
14+
15+
document.getElementById('open-popup').onclick = function() {
16+
tui.util.popup.openPopup('target', {
17+
postBridgeUrl: 'postBridge.html',
18+
popupOptionStr: 'width=600,height=400',
19+
method: 'POST',
20+
param: { a: 'b' }
21+
});
22+
};
23+
24+
})();
25+
</script>
26+
</body>
27+
</html>

‎demo/postBridge/public/postBridge.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="content-type" content="text/html; charset=utf-8">
5+
<title>PostBridge Example</title>
6+
<script type="text/javascript" charset="utf-8">
7+
function redirect(url, data) {
8+
var form = document.createElement('form'),
9+
textarea;
10+
11+
form.style.display = 'none';
12+
form.setAttribute('method', 'POST');
13+
form.setAttribute('action', url);
14+
15+
for (key in data) {
16+
if (data.hasOwnProperty(key)) {
17+
textarea = document.createElement('textarea');
18+
textarea.setAttribute('name', key);
19+
textarea.value = data[key];
20+
form.appendChild(textarea);
21+
}
22+
}
23+
24+
document.body.appendChild(form);
25+
form.submit();
26+
}
27+
</script>
28+
</head>
29+
<body>
30+
</body>
31+
</html>

‎demo/postBridge/server.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
#!/usr/bin/env node
2+
3+
var fs = require('fs');
4+
var express = require('express');
5+
var bodyParser = require('body-parser');
6+
var serveStatic = require('serve-static');
7+
8+
var app = express();
9+
10+
app.use(bodyParser.urlencoded({ extended: false }))
11+
app.use(bodyParser.json())
12+
13+
// serving script file
14+
app.use(serveStatic(__dirname + '/public', {
15+
maxAge: '1d'
16+
}))
17+
18+
// serving script file
19+
app.get('/code-snippet.js', function(req, res) {
20+
fs.createReadStream('../../code-snippet.js').pipe(res);
21+
});
22+
23+
// post target
24+
app.post('/target', function(req, res) {
25+
res.send('data received: ' + JSON.stringify(req.body));
26+
});
27+
28+
app.listen(3000);

‎package.json‎

Lines changed: 36 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,38 @@
11
{
2-
"name": "tui-code-snippet",
3-
"version": "1.0.4",
4-
"description": "useful code snippets from frontend development team",
5-
"main": "code-snippet.js",
6-
"scripts": {
7-
"doc": "./node_modules/.bin/jsdoc -c conf.json"
8-
},
9-
"repository": {
10-
"type": "git",
11-
"url": "https://github.com/nhnent/tui.code-snippet.git"
12-
},
13-
"author": "FE",
14-
"license": "MIT",
15-
"devDependencies": {
16-
"fedoc-template": "git+http://14bfd38a036366f7ca90355d202038126127bd01:[email protected]/fe/share-fedoc-template.git#snippet",
17-
"grunt": "^0.4.5",
18-
"grunt-contrib-concat": "^0.5.0",
19-
"grunt-contrib-uglify": "^0.6.0",
20-
"jasmine-ajax": "^2.0.1",
21-
"jasmine-core": "^2.2.0",
22-
"jasmine-jquery": "^2.0.5",
23-
"jquery": "1.8.3",
24-
"jsdoc": "git+https://github.com/jsdoc3/jsdoc.git",
25-
"karma": "^0.12.31",
26-
"karma-chrome-launcher": "^0.1.5",
27-
"karma-coverage": "^0.2.6",
28-
"karma-jasmine": "^0.3.5",
29-
"karma-junit-reporter": "^0.2.2",
30-
"karma-mocha-reporter": "^1.0.2",
31-
"karma-phantomjs-launcher": "^0.2.0",
32-
"karma-webdriver-launcher": "git+https://github.com/everedifice/karma-webdriver-launcher.git",
33-
"phantomjs": "^1.9.17"
34-
}
2+
"name": "tui-code-snippet",
3+
"version": "1.0.5",
4+
"description": "useful code snippets from frontend development team",
5+
"main": "code-snippet.js",
6+
"scripts": {
7+
"doc": "./node_modules/.bin/jsdoc -c conf.json"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "https://github.com/nhnent/tui.code-snippet.git"
12+
},
13+
"author": "FE",
14+
"license": "MIT",
15+
"dependencies": {
16+
"fedoc-template": "git+http://14bfd38a036366f7ca90355d202038126127bd01:[email protected]/fe/share-fedoc-template.git#snippet",
17+
"grunt": "^0.4.5",
18+
"grunt-contrib-concat": "^0.5.0",
19+
"grunt-contrib-uglify": "^0.6.0",
20+
"jasmine-ajax": "^2.0.1",
21+
"jasmine-core": "^2.2.0",
22+
"jasmine-jquery": "^2.0.5",
23+
"jquery": "1.8.3",
24+
"jsdoc": "git+https://github.com/jsdoc3/jsdoc.git",
25+
"karma": "^0.12.31",
26+
"karma-chrome-launcher": "^0.1.5",
27+
"karma-coverage": "^0.2.6",
28+
"karma-jasmine": "^0.3.5",
29+
"karma-junit-reporter": "^0.2.2",
30+
"karma-mocha-reporter": "^1.0.2",
31+
"karma-phantomjs-launcher": "^0.2.0",
32+
"karma-webdriver-launcher": "git+https://github.com/everedifice/karma-webdriver-launcher.git",
33+
"phantomjs": "^1.9.17",
34+
"body-parser": "^1.14.1",
35+
"express": "^4.13.3",
36+
"serve-static": "^1.10.0"
37+
}
3538
}

0 commit comments

Comments
 (0)