Skip to content

Instantly share code, notes, and snippets.

@ksoichiro

ksoichiro/child.html

Created May 27, 2012 15:34
Show Gist options
  • Save ksoichiro/2814807 to your computer and use it in GitHub Desktop.
Save ksoichiro/2814807 to your computer and use it in GitHub Desktop.
Download ZIP
How to pass selected IDs to a child window and read page for each IDs
Raw
child.html
<html>
<head>
<script type="text/javascript">
window.onload = function() {
var ids = [];
if (!window.opener) {
setMsg('You cannot open this page directly.');
return;
}
// Get parent's value from child.
var chk1 = window.opener.document.forms[0].chk1;
if (chk1.length) {
for (var i = 0; i < chk1.length; i++) {
if (chk1[i].checked) {
ids.push(chk1[i].value);
}
}
} else if (chk1.checked) {
ids.push(chk1.value);
}
setMsg('checked: ' + ids.join(', ')); // for debug
// Edit this value to adjust number of contents in page.
var unit = 3;
var body = document.getElementById('body');
for (var i = 0; i < ids.length; i += unit) {
var idsToPass = new Array;
for (var j = 0; j < unit && i + j < ids.length; j++) {
idsToPass.push(ids[i + j]);
}
var iframe = document.createElement('iframe');
iframe.src = 'content.html?ids=' + idsToPass.join(',');
// Show iframe as if it is a part of the current page.
iframe.style.border = 'none';
iframe.style.display = 'block';
iframe.style.height = '50px';
// Break pages to print
if (i > 0) {
iframe.style.pageBreakBefore = 'always';
}
body.appendChild(iframe);
}
};
function setMsg(msg) {
document.getElementById('msg').firstChild.nodeValue = msg;
}
</script>
</head>
<body>
<div id="msg" />
<div id="body" />
</body>
</html>
Raw
content.html
<html>
<head>
<style type="text/css">
body {
margin: 0px;
}
</style>
<script type="text/javascript">
var queryString = {};
if (location.search.length > 1) {
var params = location.search.substr(1).split("&");
for (var idx in params) {
var kv = params[idx].split("=");
queryString[kv[0]] = kv[1];
}
}
window.onload = function() {
setMsg('ids=' + queryString['ids']);
}
function setMsg(msg) {
document.getElementById('msg').firstChild.nodeValue = msg;
}
</script>
</head>
<body>
content
<div id="msg" />
</body>
</html>
Raw
parent.html
<html>
<head>
<script type="text/javascript">
function showChild() {
window.open('child.html', 'docs', 'width=400,height=200,toolbar=no,scrollbars=no,left=200,top=100');
return true;
}
</script>
</head>
<body>
<div>
<a href="javascript:void(0);" onclick="showChild();">Show child</a>
</div>
<form name="frm">
<table>
<tr>
<td><input type="checkbox" name="chk1" value="1000"></td>
<td>1000</td>
</tr>
<tr>
<td><input type="checkbox" name="chk1" value="1001"></td>
<td>1001</td>
</tr>
<tr>
<td><input type="checkbox" name="chk1" value="1002"></td>
<td>1002</td>
</tr>
<tr>
<td><input type="checkbox" name="chk1" value="1003"></td>
<td>1003</td>
</tr>
<tr>
<td><input type="checkbox" name="chk1" value="1004"></td>
<td>1004</td>
</tr>
<tr>
<td><input type="checkbox" name="chk1" value="1005"></td>
<td>1005</td>
</tr>
<tr>
<td><input type="checkbox" name="chk1" value="1006"></td>
<td>1006</td>
</tr>
<tr>
<td><input type="checkbox" name="chk1" value="1007"></td>
<td>1007</td>
</tr>
<tr>
<td><input type="checkbox" name="chk1" value="1008"></td>
<td>1008</td>
</tr>
<tr>
<td><input type="checkbox" name="chk1" value="1009"></td>
<td>1009</td>
</tr>
<tr>
<td><input type="checkbox" name="chk1" value="1010"></td>
<td>1010</td>
</tr>
</table>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment